组件的按需加载是提升首屏性能的重要手段。

dva@2.0使用了react-router@4.0，相关的使用方式有变化，网上的讨论基本上都是旧的，不清楚的话会比较乱，这里做一下记录。

dva@2.0以前

dva@2.0以前的懒加载相关讨论有不少，可以参考中的写法，徐飞大佬的文章，本质上借助的是webpack的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 
    ;}

dva@2.0以后

dva@2.0使用了react-router@4.0，其中的路由是组件式的，原来的方式就不太好搞。因此dva提供了一个dynamic函数来处理。

import dynamic from 'dva/dynamic';function RouterConfig({ history,app }) {  const UserPageComponent = dynamic({    app,    models: () => [      import('./models/users'),    ],    component: () => import('./routes/UserPage'),  });  return (    
          
             
              
            
         
      );}export default RouterConfig;