React 代码分割

代码分割

• 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 这几个函数。它们都是异步执行，并且只有在需要时才被调用。我们将这种方式称之为 逐渐匹配。