当我们的代码越来越复杂，文件越来越大时，往往会遇到网页加载速度慢的问题。为了提高网页性能，我们可以使用 webpack4 的代码分离（Code Splitting）功能来对代码进行分割，使得页面只需加载所需的代码，提高网页的加载速度。
概念
代码分离（Code Splitting）是将代码分解成多个部分的技术，为了达到以下目标：
- 减少单个文件的大小；
- 减少浏览器下载资源的数量，从而减少加载时间；
- 充分利用浏览器的缓存，减少重复下载。
Webpack 提供了多种代码分离的技术，包括：入口起点（entry point）分离、动态导入（dynamic imports）分离、代码共享（code sharing）分离等。
入口起点分离
入口起点分离（Entry Point Splitting）是将代码分解成多个 bundle 构建输出，因此每个 bundle 都有自己的入口起点。当存在多个页面或多个单页应用时，入口起点分离是很有用的。
在 webpack4 中，入口起点通过 entry 配置项来指定。例如：
-- -------------------- ---- -------
-------------- - -
------ -
---- ---------------
------- -----------------
--
------- -
--------- -------------------------
-
--上面的配置将会生成两个 bundle：app.[contenthash].js 和 vendor.[contenthash].js。
动态导入分离
动态导入分离（Dynamic Imports Splitting）可以使得一些代码在需要的时候才会被下载。在 webpack4 中，可以使用 import() 函数来实现动态导入分离。例如：
-- -------------------- ---- ------- ----- -------- -------------- - ----- ------- - ------------------------------ ----- - -------- - - - ----- ----------------- ----------------- - ---------------- ----------- - --- ------ -------- - --------------------------- -- - ----------------------------------- ---
上面的代码中，当 getComponent() 函数被调用时，才会下载 lodash 库。
代码共享分离
代码共享分离（Code Sharing Splitting）可以使得多个 bundle 共享同一个 bundle，从而减少代码的重复下载。在 webpack4 中，可以使用 optimization.splitChunks 配置项来实现代码共享分离。例如：
-- -------------------- ---- -------
-------------- - -
------ -
---- ---------------
------ -----------------
------ ----------------
--
------- -
--------- -------------------------
--
------------- -
------------ -
------- ------
----- --------
-
-
--上面的配置将会生成 4 个 bundle：app.[contenthash].js、page1.[contenthash].js、page2.[contenthash].js 以及 common.[contenthash].js，其中 common.[contenthash].js 包含了被多个页面所共享的代码。
总结
webpack4 提供了多种代码分离的技术，可以在打包资源过大时有效减小文件体积。使用代码分离技术可以使页面加载速度更快，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d587a48841e9894a1b8df