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 动态加载组件杂谈
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。