资讯专栏INFORMATION COLUMN

dva 结合webpack4 改写动态加载

pekonchan / 2312人阅读

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

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

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

转载请注明本文地址:https://www.ucloud.cn/yun/104650.html

相关文章

  • 如何搭建一个基于react、webpack4、babel7的项目(一)

    摘要:对的工作流程有点模糊,以及据官方文档称的升级,性能得到了极大的提升,而还是用的,于是决定从头开始搭建一个适合团队的脚手架。保证各文件获得一致的文件编码和缩进效果。这些在后面文章中,都会一个个涉及到,此处不做详细展开。 前言 写前端项目这么久了,以前用的 dva 框架,后来用过 create-react-app 框架,都需要针对团队做一些定制化的修改。对 webpack 的工作流程有点模...

    IamDLY 评论0 收藏0
  • 如何优化你的超大型React应用 【原创精读】

    摘要:往往纯的单页面应用一般不会太复杂,所以这里不引入和等等,在后面复杂的跨平台应用中我会将那些技术一拥而上。构建极度复杂,超大数据的应用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React为了大型应用而生,Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力,Taro则赋...

    cfanr 评论0 收藏0
  • 如何优化你的超大型React应用 【原创精读】

    摘要:往往纯的单页面应用一般不会太复杂,所以这里不引入和等等,在后面复杂的跨平台应用中我会将那些技术一拥而上。构建极度复杂,超大数据的应用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React为了大型应用而生,Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力,Taro则赋...

    codecook 评论0 收藏0
  • 如何优化你的超大型React应用 【原创精读】

    摘要:往往纯的单页面应用一般不会太复杂,所以这里不引入和等等,在后面复杂的跨平台应用中我会将那些技术一拥而上。构建极度复杂,超大数据的应用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React为了大型应用而生,Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力,Taro则赋...

    xiguadada 评论0 收藏0
  • webpack4 系列教程(五): 处理CSS

    摘要:版本和版本并没有特别的出入。需要注意的是,在老式浏览器中,对标签的数量是有要求的。这样,方便开发者根据业务需要,对进行相关处理。需要注意的是是在引入前根据需要修改,所以之后是不会改变的。重新刷新页面,才会是红色。 这节课讲解webpack4中打包css的应用。v4 版本和 v3 版本并没有特别的出入。 >>> 本节课源码 >>> 所有课程源码 教程所示图片使用的是 github 仓库图...

    nevermind 评论0 收藏0

发表评论

0条评论

pekonchan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<