dva 結(jié)合webpack4 改寫(xiě)動(dòng)態(tài)加載

pekonchan 發(fā)布于2019-08-23 18:05 / 2355人閱讀

摘要：具體就不貼上來(lái)了，這里主要是利用采用的動(dòng)態(tài)加載原理進(jìn)行改造。首先，依賴(lài)與，所以最初的想法是采用結(jié)合的方式進(jìn)行改寫(xiě)。這個(gè)過(guò)程實(shí)際是是的動(dòng)態(tài)加載。

dva現(xiàn)在是構(gòu)建在umi基礎(chǔ)上，由于項(xiàng)目的原因，我并沒(méi)有采用umi架構(gòu)，而是自己使用webpack4來(lái)進(jìn)行打包，只用dva負(fù)責(zé)數(shù)據(jù)流的處理，dva原來(lái)的dynamic在webpack4上編譯會(huì)有一堆錯(cuò)誤。具體就不貼上來(lái)了，這里主要是利用webpack4采用import的動(dòng)態(tài)加載原理進(jìn)行改造。

首先，dva依賴(lài)與react-router，所以最初的想法是采用react-router結(jié)合webpack4的方式進(jìn)行改寫(xiě)。這里我用到一個(gè)庫(kù)，就是@loadable/component，這個(gè)在react-router的動(dòng)態(tài)加載案例里也有采納，但是大家都知道，dva原來(lái)的dynamic.js在動(dòng)態(tài)加載react-router的component時(shí)還要使用registerModel來(lái)進(jìn)行model注冊(cè)。這個(gè)過(guò)程實(shí)際是是redux的動(dòng)態(tài)加載。在這里我參考了webpack4的動(dòng)態(tài)加載案例，使用import().then(module)的方式來(lái)進(jìn)行動(dòng)態(tài)加載。說(shuō)了這么多，把代碼放上來(lái)：

import loadable from "@loadable/component"

/*dva官方代碼*/
const cached = {}
function registerModel(app, model) {
  model = model.default || model
  if( !cached[model.namespace] ) {
    app.model(model)
    cached[model.namespace] = 1
  }
}

/*動(dòng)態(tài)加載封裝*/
const AsyncPage = loadable(props => {
  import(`your/path/${props.component}/model`).then((module) => {
    registerModel(props.app, module.default)
  })
  return import(`your/path/${props.component}`)
})

使用起來(lái)就是像dva原來(lái)的dynamic上一樣，建立一個(gè)routes對(duì)象數(shù)組

[{
  path:"your/path",
  key:"yourkey",
  component: props => {
    return 
  }
}]

然后map一下就OK了。

GPU云服務(wù)器云服務(wù)器動(dòng)態(tài)加載動(dòng)態(tài)加載數(shù)據(jù) 動(dòng)態(tài)加載頁(yè)面動(dòng)態(tài)加載元素

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104650.html

相關(guān)文章

如何搭建一個(gè)基于react、webpack4、babel7的項(xiàng)目（一）

摘要：對(duì)的工作流程有點(diǎn)模糊，以及據(jù)官方文檔稱(chēng)的升級(jí)，性能得到了極大的提升，而還是用的，于是決定從頭開(kāi)始搭建一個(gè)適合團(tuán)隊(duì)的腳手架。保證各文件獲得一致的文件編碼和縮進(jìn)效果。這些在后面文章中，都會(huì)一個(gè)個(gè)涉及到，此處不做詳細(xì)展開(kāi)。前言寫(xiě)前端項(xiàng)目這么久了，以前用的 dva 框架，后來(lái)用過(guò) create-react-app 框架，都需要針對(duì)團(tuán)隊(duì)做一些定制化的修改。對(duì) webpack 的工作流程有點(diǎn)模...

IamDLY 2019-08-23 12:30 評(píng)論0 收藏0
如何優(yōu)化你的超大型React應(yīng)用【原創(chuàng)精讀】

摘要：往往純的單頁(yè)面應(yīng)用一般不會(huì)太復(fù)雜，所以這里不引入和等等，在后面復(fù)雜的跨平臺(tái)應(yīng)用中我會(huì)將那些技術(shù)一擁而上。構(gòu)建極度復(fù)雜，超大數(shù)據(jù)的應(yīng)用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React為了大型應(yīng)用而生，Electron和React-native賦予了它構(gòu)建移動(dòng)端跨平臺(tái)App和桌面應(yīng)用的能力，Taro則賦...

cfanr 2019-08-02 15:36 評(píng)論0 收藏0
如何優(yōu)化你的超大型React應(yīng)用【原創(chuàng)精讀】

摘要：往往純的單頁(yè)面應(yīng)用一般不會(huì)太復(fù)雜，所以這里不引入和等等，在后面復(fù)雜的跨平臺(tái)應(yīng)用中我會(huì)將那些技術(shù)一擁而上。構(gòu)建極度復(fù)雜，超大數(shù)據(jù)的應(yīng)用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React為了大型應(yīng)用而生，Electron和React-native賦予了它構(gòu)建移動(dòng)端跨平臺(tái)App和桌面應(yīng)用的能力，Taro則賦...

codecook 2019-08-26 10:17 評(píng)論0 收藏0
如何優(yōu)化你的超大型React應(yīng)用【原創(chuàng)精讀】

摘要：往往純的單頁(yè)面應(yīng)用一般不會(huì)太復(fù)雜，所以這里不引入和等等，在后面復(fù)雜的跨平臺(tái)應(yīng)用中我會(huì)將那些技術(shù)一擁而上。構(gòu)建極度復(fù)雜，超大數(shù)據(jù)的應(yīng)用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React為了大型應(yīng)用而生，Electron和React-native賦予了它構(gòu)建移動(dòng)端跨平臺(tái)App和桌面應(yīng)用的能力，Taro則賦...

xiguadada 2019-08-30 15:44 評(píng)論0 收藏0
webpack4 系列教程(五): 處理CSS

摘要：版本和版本并沒(méi)有特別的出入。需要注意的是，在老式瀏覽器中，對(duì)標(biāo)簽的數(shù)量是有要求的。這樣，方便開(kāi)發(fā)者根據(jù)業(yè)務(wù)需要，對(duì)進(jìn)行相關(guān)處理。需要注意的是是在引入前根據(jù)需要修改，所以之后是不會(huì)改變的。重新刷新頁(yè)面，才會(huì)是紅色。這節(jié)課講解webpack4中打包c(diǎn)ss的應(yīng)用。v4 版本和 v3 版本并沒(méi)有特別的出入。 >>> 本節(jié)課源碼 >>> 所有課程源碼教程所示圖片使用的是 github 倉(cāng)庫(kù)圖...

nevermind 2019-08-23 11:33 評(píng)論0 收藏0