dva中组件的懒加载
栏目: JavaScript · 发布时间: 5年前
内容简介:组件的按需加载是提升首屏性能的重要手段。dva@2.0使用了react-router@4.0,相关的使用方式有变化,网上的讨论基本上都是旧的,不清楚的话会比较乱,这里做一下记录。dva@2.0以前的懒加载相关讨论有不少,可以参考
组件的按需加载是提升首屏性能的重要手段。
dva@2.0使用了react-router@4.0,相关的使用方式有变化,网上的讨论基本上都是旧的,不清楚的话会比较乱,这里做一下记录。
dva@2.0以前
dva@2.0以前的懒加载相关讨论有不少,可以参考 dva-example-user-dashboard
中的写法,徐飞大佬的文章 使用 Dva 开发复杂 SPA
,本质上借助的是webpack的 require.ensure
实现代码分割,参考 代码分割 - 使用 require.ensure
。
具体实现形如:
function RouterConfig({ history, app }) { const routes = [ { path: '/', name: 'IndexPage', getComponent(nextState, cb) { require.ensure([], (require) => { registerModel(app, require('./models/dashboard')); cb(null, require('./routes/IndexPage')); }); }, }, { path: '/users', name: 'UsersPage', getComponent(nextState, cb) { require.ensure([], (require) => { registerModel(app, require('./models/users')); cb(null, require('./routes/Users')); }); }, }, ]; return <Router history={history} routes={routes} />; }
dva@2.0以后
dva@2.0使用了react-router@4.0,其中的路由是组件式的,原来的方式就不太好搞。因此dva提供了一个dynamic函数来处理。
在 dva@2.0发布日志 和 dva api文档 中有介绍。
具体实现形如:
import dynamic from 'dva/dynamic'; function RouterConfig({ history,app }) { const UserPageComponent = dynamic({ app, models: () => [ import('./models/users'), ], component: () => import('./routes/UserPage'), }); return ( <Router history={history}> <Switch> <Route path="/user" component={UserPageComponent} /> <Route component={IndexPageComponent} /> </Switch> </Router> ); } export default RouterConfig;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- [译] React 16.6 懒加载(与预加载)组件
- Vue异步组件处理路由组件加载状态
- 手把手实现图片懒加载+封装vue懒加载组件
- Angular动态加载组件
- vue 页面加载进度条组件实例
- Angular4 动态加载组件杂谈
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
两周自制脚本语言
[日]千叶 滋 / 陈筱烟 / 人民邮电出版社 / 2014-6 / 59.00元
《两周自制脚本语言》是一本优秀的编译原理入门读物。全书穿插了大量轻松风趣的对话,读者可以随书中的人物一起从最简单的语言解释器开始,逐步添加新功能,最终完成一个支持函数、数组、对象等高级功能的语言编译器。本书与众不同的实现方式不仅大幅简化了语言处理器的复杂度,还有助于拓展读者的视野。 《两周自制脚本语言》适合对编译原理及语言处理器设计有兴趣的读者以及正在学习相关课程的大中专院校学生。同时,已经......一起来看看 《两周自制脚本语言》 这本书的介绍吧!
JSON 在线解析
在线 JSON 格式化工具
HSV CMYK 转换工具
HSV CMYK互换工具