dva 结合webpack4 改写动态加载

更新日期: 2019-05-13阅读: 2.7k标签: dva

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://www.fly63.com/article/detial/3681

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!