dva 结合webpack4 改写动态加载

2019-06-13 admin

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://segmentfault.com/a/1190000019458864

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67149.html

文章标题:dva 结合webpack4 改写动态加载

相关文章
2015年4月TIOBE编程语言排行榜 JavaScript排第六位
IOBE近日发布2015年4月编程语言排行榜,前三名终于发生变化,Objective-C退出前三掉落第四位,C++势头勇猛上升4位冲进前三,Java更是一举大力夺得第一,而最让人兴奋的是JavaScript连冲9位,雄踞第六位! ...
2015-11-12
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
JS动态修改图片的URL(src)的方法
本文实例讲述了JS动态修改图片的URL(src)的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 &lt;!DOCTYPE html&gt; &lt;...
2017-03-22
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
4种方法帮你的网站创建更丰富的Web体验
现在的网站已经从一个简单的文本页面开始进化了很多,我们可以制作出丰富的视觉效果来增加用户在桌面浏览器和移动浏览器的体验。 今天这篇文字就给大家分享4个实用的方法,来帮助你创建更好的Web体验。 对于那些还在用IE6的朋友,我只想说一句:go...
2016-01-13
angular+ionic 的app上拉加载更新数据实现方法
第一步,首先需要在&lt;ion-content&gt;标签里面加入标签&lt;ion-infinite-scroll ng-if=&quot;hasmore&quot; on-infinite=&quot;loadMore()&quot;...
2017-03-07
element动态表单验证prop用法
基于Vue的Element.js的Form组件中,提供了一个动态增减表单的验证逻辑,这在项目中的提供了很大帮助。 但在实际写代码过程中,会遇到很多的坑,特别是动态添加验证规则时,prop属性不知道怎么用。 1、el-form标签的model...
2018-06-27
js结合正则实现国内手机号段校验
附加一个utils对象,内含一个校验手机号函数,一个格式化返回数据函数 var isChinaMobile = &#x2F;^134[0-8]\d{7}$|^(?:13[5-9]|147|15[0-27-9]|178|18[2-478])\...
2017-03-25
JavaScript实现DIV层拖动及动态增加新层的方法
本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法。分享给大家供大家参考。具体分析如下: 无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动...
2017-03-23
Yarn v0.24.2 发布,新型 Javascript 包管理器
Yarn 是 Facebook 贡献 Javascript 包管理器,用于替代现有的 npm 客户端或者其他兼容 npm 仓库的包管理工具。Yarn 保留了现有工作流的特性,优点是更快、更安全、更可靠。 特性: 极速:Yarn 缓存它下载...
2017-05-08
回到顶部