dva中组件的懒加载

组件的按需加载是提升首屏性能的重要手段。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;