dva 結合webpack4 改寫動態加載

pekonchan 發布于2019-08-23 18:05 / 2348人閱讀

摘要：具體就不貼上來了，這里主要是利用采用的動態加載原理進行改造。首先，依賴與，所以最初的想法是采用結合的方式進行改寫。這個過程實際是是的動態加載。

dva現在是構建在umi基礎上，由于項目的原因，我并沒有采用umi架構，而是自己使用webpack4來進行打包，只用dva負責數據流的處理，dva原來的dynamic在webpack4上編譯會有一堆錯誤。具體就不貼上來了，這里主要是利用webpack4采用import的動態加載原理進行改造。

首先，dva依賴與react-router，所以最初的想法是采用react-router結合webpack4的方式進行改寫。這里我用到一個庫，就是@loadable/component，這個在react-router的動態加載案例里也有采納，但是大家都知道，dva原來的dynamic.js在動態加載react-router的component時還要使用registerModel來進行model注冊。這個過程實際是是redux的動態加載。在這里我參考了webpack4的動態加載案例，使用import().then(module)的方式來進行動態加載。說了這么多，把代碼放上來：

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
  }
}

/*動態加載封裝*/
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上一樣，建立一個routes對象數組

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

然后map一下就OK了。

GPU云服務器云服務器動態加載動態加載數據動態加載頁面動態加載元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104650.html

如何搭建一個基于react、webpack4、babel7的項目（一）

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

IamDLY 2019-08-23 12:30 評論0 收藏0
如何優化你的超大型React應用【原創精讀】

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

cfanr 2019-08-02 15:36 評論0 收藏0
如何優化你的超大型React應用【原創精讀】

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

codecook 2019-08-26 10:17 評論0 收藏0
如何優化你的超大型React應用【原創精讀】

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

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

摘要：版本和版本并沒有特別的出入。需要注意的是，在老式瀏覽器中，對標簽的數量是有要求的。這樣，方便開發者根據業務需要，對進行相關處理。需要注意的是是在引入前根據需要修改，所以之后是不會改變的。重新刷新頁面，才會是紅色。這節課講解webpack4中打包css的應用。v4 版本和 v3 版本并沒有特別的出入。 >>> 本節課源碼 >>> 所有課程源碼教程所示圖片使用的是 github 倉庫圖...

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