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了。

链接: https://fly63.com/article/detial/3681