代码分割
- webpack 处理方式常用有三种
① 入口起点：使用entry配置手动地分离代码。
② 防止重复：使用SplitChunksPlugin去重和分离 chunk。
③ 动态导入：通过模块中的内联函数调用来分离代码。本质是通过返回Promise的方式实现异步加载功能
本文重点讲解关于第三种方法 dynamic imports
当涉及到动态代码拆分时，webpack 提供了两个类似的技术。
①使用符合 ECMAScript 提案 的 import() 语法 来实现动态导入。
②使用 webpack 特定的 require.ensure
在我的项目中我用的比较多的是②
下面贴代码
<Route path="/" component={Root}>
<IndexRoute getComponent={(nextState, callback) => {
require.ensure([], function (require) {
callback(null, require('./pages/login'));
});
}}>
</Route>
此法得益于react-router 体用的动态路由功能
- react-router 提供的动态路由
React Router 里的路径匹配以及组件加载都是异步完成的，不仅允许你延迟加载组件，并且可以延迟加载路由配置
Route 可以定义getChildRoutes，getIndexRoute和getComponents这几个函数。它们都是异步执行，并且只有在需要时才被调用。我们将这种方式称之为 逐渐匹配。
