dva 结合webpack4 改写动态加载

pekonchan 发布于2019-08-23 18:05 / 2203人阅读

摘要：具体就不贴上来了，这里主要是利用采用的动态加载原理进行改造。首先，依赖与，所以最初的想法是采用结合的方式进行改写。这个过程实际是是的动态加载。

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

云服务器 idc机房托管动态加载动态加载数据动态加载页面动态加载元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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