共计 1171 个字符，预计需要花费 3 分钟才能阅读完成。
组件的按需加载是提升首屏性能的重要手段。
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;
