摘要:具体就不贴上来了,这里主要是利用采用的动态加载原理进行改造。首先,依赖与,所以最初的想法是采用结合的方式进行改写。这个过程实际是是的动态加载。
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
摘要:对的工作流程有点模糊,以及据官方文档称的升级,性能得到了极大的提升,而还是用的,于是决定从头开始搭建一个适合团队的脚手架。保证各文件获得一致的文件编码和缩进效果。这些在后面文章中,都会一个个涉及到,此处不做详细展开。 前言 写前端项目这么久了,以前用的 dva 框架,后来用过 create-react-app 框架,都需要针对团队做一些定制化的修改。对 webpack 的工作流程有点模...
摘要:往往纯的单页面应用一般不会太复杂,所以这里不引入和等等,在后面复杂的跨平台应用中我会将那些技术一拥而上。构建极度复杂,超大数据的应用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React为了大型应用而生,Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力,Taro则赋...
摘要:往往纯的单页面应用一般不会太复杂,所以这里不引入和等等,在后面复杂的跨平台应用中我会将那些技术一拥而上。构建极度复杂,超大数据的应用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React为了大型应用而生,Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力,Taro则赋...
摘要:往往纯的单页面应用一般不会太复杂,所以这里不引入和等等,在后面复杂的跨平台应用中我会将那些技术一拥而上。构建极度复杂,超大数据的应用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React为了大型应用而生,Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力,Taro则赋...
摘要:版本和版本并没有特别的出入。需要注意的是,在老式浏览器中,对标签的数量是有要求的。这样,方便开发者根据业务需要,对进行相关处理。需要注意的是是在引入前根据需要修改,所以之后是不会改变的。重新刷新页面,才会是红色。 这节课讲解webpack4中打包css的应用。v4 版本和 v3 版本并没有特别的出入。 >>> 本节课源码 >>> 所有课程源码 教程所示图片使用的是 github 仓库图...
阅读 3276·2023-04-26 03:05
阅读 1431·2019-08-30 13:09
阅读 1882·2019-08-30 13:05
阅读 795·2019-08-29 12:42
阅读 1354·2019-08-28 18:18
阅读 3423·2019-08-28 18:09
阅读 484·2019-08-28 18:00
阅读 1683·2019-08-26 12:10