Webpack 是前端项目中广泛使用的打包工具，通过将多个文件打包成一个文件，实现了减少 HTTP 请求和提高页面加载速度的效果。但是，随着项目越来越大，单个打包出的文件也越来越大，导致页面加载速度变慢。
为了解决这个问题，Webpack 提供了代码分割的功能，可以将代码按照一定规则分离成多个文件，以达到缩小打包文件的目的。
代码分割的实现方式
Webpack 中有多种方式实现代码分割，包括动态导入、插件和配置等，下面分别介绍。
动态导入
动态导入是一种运行时分割代码的方法，它可以将不同的代码块分别打包成不同的文件，达到代码分离的效果。
在 ES2015 中，可以通过 import()函数来实现动态导入。例如：
import('./TestComponent').then(TestComponent => {
// code split chunk loaded
})当 TestComponent 被导入时，Webpack 会自动打包一个代码块，并在需要的时候加载。可以在开发环境下通过 network 面板查看到这个代码块。
插件
Webpack 还提供了可配置的插件，用于完成代码分割的功能。常用的插件有 SplitChunksPlugin 和 MiniCssExtractPlugin。
SplitChunksPlugin 可以帮助我们将公共模块提取出来，避免重复打包，减小打包后的体积。
MiniCssExtractPlugin 可以将 CSS 提取到单独的文件中，降低了 JS 与 CSS 打包在同一个文件导致的文件体积增大的情况。
配置
通过配置 Webpack 的 optimization.splitChunks 属性，可以实现代码分割。例如：
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'all'
}
}
}配置 chunks 属性为 'all'，表示将所有的模块都分割成新的代码块，这样就实现了代码分割的效果。
示例代码
下面是一个通过代码分割实现的 Webpack 配置示例代码：
-- -------------------- ---- -------
----- -------------------- - ----------------------------------
----- ----------------- - ------------------------------
-------------- - -
----- -------------
------ -
---- ----------------
--
------- -
--------- ------------------------
----------- ---
--
------------- -
------------ -
------- -----
-
--
------- -
------ -
-
----- --------
-------- ---------------
---- --------------
--
-
----- ----------
---- -
----------------------------
-------------
-------------
-
-
-
--
-------- -
--- ----------------------
--------- ------------------------
---
--- -------------------
--------- -------------------
--------- -------------
------- ----
--
-
-在这个配置文件中，我们使用了 optimization.splitChunks，将所有模块分割成新的代码块。同时，使用 MiniCssExtractPlugin 将 CSS 提取到单独的文件中，最终实现了代码分割。
总结
代码分割是 Webpack 打包优化中非常重要的一环，可以有效地减小打包后的文件体积，提高页面加载速度。通过动态导入、插件和配置等多种方式，我们可以实现代码分割的功能。在实际项目开发中，根据项目需求进行分块的有效性分析，并选择合适的分块方式，可以提高项目的性能表现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6528c04f7d4982a6ebb4e63e