React基于路由进行代码分割

这两天整理项目经历，看到这一个知识点，重新实现了一遍，顺便记录一下。

一、为什么要做代码分割和懒加载？

背景： 随着项目开发，业务功能增加，代码量随着增长，代码包体积日渐肥胖，尤其是整合了多种第三方库，导致代码包体积过大，加载时间长，性能下降。

对策： WebPack 等打包工具早有代码分离的特性来应对这种问题，将代码分离到不同的 bundle 中，需要时按需加载就可以极大改善加载时间长的问题。常见的代码分离方法有三种：

• 入口起点：使用 entry 配置手动地分离代码。
• 防止重复：使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离 chunk。
• 动态导入：通过模块的内联函数调用来分离代码。

今天我们就是采用动态导入来实现分包。

决定在哪引入代码分割需要一些技巧。需要确保选择的位置能够均匀地分割代码包而不会影响用户体验。

一个不错的选择是从路由开始。大多数网络用户习惯于页面之间能有个加载切换过程。

实现将代码按照路由进行分割，只在访问该路由的时候才加载该页面内容，可以提高首屏加载速度。

二、知识预知