组件的按需加载是提升首屏性能的重要手段。
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;
转载请注明：XAMPP中文组官网 » dva中组件的懒加载