Webpack 是前端开发中最流行的打包工具之一，它可以帮助我们将多个 JavaScript 文件打包成一个或多个 bundle，在项目开发中发挥着非常重要的作用。但是，随着项目的逐渐增大，Webpack 打包的速度和体积也会逐渐变慢和变大。为了解决这一问题，我们可以通过一些优化方式来提高 Webpack 的打包效率，其中就包括了我们今天要介绍的 SplitChunksPlugin。本文将详细介绍 SplitChunksPlugin 原理、使用方式以及注意事项。
SplitChunksPlugin 原理
SplitChunksPlugin 是 Webpack4.x 中提供的一个代码分割插件，它主要的作用是将代码中重复的部分打包成单独的文件，避免重复打包和引用，从而减小打包后的文件体积。该插件将公共部分抽离成单独的文件，使其可以被多个入口模块共享，避免了代码冗余，并提高了浏览器的缓存效率。SplitChunksPlugin 的原理如下：
- 将代码中的公共部分打包成一个或多个单独的文件
- 每个文件都有一个唯一的 hash 值，在文件内容改变时，hash 值也会改变
- 每个 module 只会被打包到一个 chunk 中去
SplitChunksPlugin 使用方式
SplitChunksPlugin 使用非常简单，只需要在 Webpack 配置文件中增加对应的插件即可。具体配置方式如下：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------------- -
------------ -
------- ------ -- ----------
--
--
--chunks：可以是字符串或者是一个函数，指定代码分割的范围。可选值有'all'、'async'、'initial'，默认为'async'。其中：'all'：所有的 chunk 都可以共享代码'async'：只有异步加载的 chunk 可以共享代码'initial'： 入口 chunk 可以共享代码
如果您的项目中还有需要共享的公共代码，您还可以指定一个名称，让其共享这些公共模块。具体配置方式如下：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------------- -
------------ -
------- ------ -- ----------
------------ -
------- -
----- -------------------------
----- ----------
------- ------
--
--
--
--
--cacheGroups 中配置的是具体要抽离出来的代码块，包括 test、name、chunks 等属性：
test：指定抽离的模块name：指定打包生成的文件的名称chunks：指定使用范围
SplitChunksPlugin 注意事项
在使用 SplitChunksPlugin 的过程中，需要注意不要过度分割代码，以防增加额外的 HTTP 请求，导致网页加载时间过长。
在 SplitChunksPlugin 中，使用
cacheGroups进行代码抽离时，要注意打包后生成的文件名称不要重复，避免出现打包后的文件名错误。可以在文件名中加入 hash 值来保证文件名的唯一性。
总结
SplitChunksPlugin 是 Webpack 中非常重要的一个优化插件，可以帮助我们避免代码冗余，减小打包后的文件体积，提高浏览器的缓存效率。在使用该插件时，需要注意不要过度分割代码，同时也要注意打包后生成的文件名称不要重复。我们可以根据自己的项目实际情况来选择合适的配置方式，同时也可以根据需要选择适合自己的范围。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2c9ea48841e9894ef1797