dva 結(jié)合webpack4 改寫動態(tài)加載

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

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

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

首先，dva依賴與react-router，所以最初的想法是采用react-router結(jié)合webpack4的方式進(jìn)行改寫。這里我用到一個(gè)庫，就是@loadable/component，這個(gè)在react-router的動態(tài)加載案例里也有采納，但是大家都知道，dva原來的dynamic.js在動態(tài)加載react-router的component時(shí)還要使用registerModel來進(jìn)行model注冊。這個(gè)過程實(shí)際是是redux的動態(tài)加載。在這里我參考了webpack4的動態(tài)加載案例，使用import().then(module)的方式來進(jìn)行動態(tà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
  }
}

/*動態(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}`)
})

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

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

然后map一下就OK了。

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104650.html

相關(guān)文章

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

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

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

摘要：往往純的單頁面應(yīng)用一般不會太復(fù)雜，所以這里不引入和等等，在后面復(fù)雜的跨平臺應(yīng)用中我會將那些技術(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)建移動端跨平臺App和桌面應(yīng)用的能力，Taro則賦...

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

摘要：往往純的單頁面應(yīng)用一般不會太復(fù)雜，所以這里不引入和等等，在后面復(fù)雜的跨平臺應(yīng)用中我會將那些技術(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)建移動端跨平臺App和桌面應(yīng)用的能力，Taro則賦...

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

摘要：往往純的單頁面應(yīng)用一般不會太復(fù)雜，所以這里不引入和等等，在后面復(fù)雜的跨平臺應(yīng)用中我會將那些技術(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)建移動端跨平臺App和桌面應(yīng)用的能力，Taro則賦...

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

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

nevermind 2019-08-23 11:33 評論0 收藏0