dva 結合webpack4 改寫動態加載

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 <AsyncPage component="your/path/component" app={app} {..props} />
  }
}]

而後map一下就OK了。