dva 结合webpack4 改写动态加载

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

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

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

GPU云服务器云服务器动态加载动态加载数据动态加载页面动态加载元素

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

转载请注明本文地址：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