作为前端开发人员，我们经常使用webpack来打包我们的应用程序。但是，随着应用程序规模的增加，打包后的文件变得越来越大，使得页面加载时间变长且响应时间变慢。因此，我们需要学习一些优化技巧来缩小打包后的文件，并使用webpack的 splitChunks 插件帮助我们优化效果。
splitChunks的作用
splitChunks 插件可以将公共代码从不同的模块（例如库）中提取出来，将公共模块打包成一个单独的文件，避免了代码的重复加载和浪费，提高了应用程序的性能和响应速度。
如何使用 splitChunks
使用 splitChunks 插件，我们需要在 webpack.config.js 文件中进行相关配置。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------------- -
------------ -
------- ------
-------- ------
-------- --
---------- --
------------ -
-------- ------
-------- ------
------- -
----- -------------------------
----- ---------
------- -----
-
-
-
-
--splitChunks 配置项
chunks
配置块的范围，有效值包括：
- 'all': 选择所有模块。
- 'async': 只从异步加载的模块中提取公共代码。
- 'initial': 只从入口模块中提取公共代码。
minSize
分离出的代码块的最小体积。
maxSize
分离出的代码块的最大体积，设置为0表示没有限制。
minChunks
公共代码块的最小出现次数。
cacheGroups
缓存组是一种将多个缓存组合并到一起的方法，其配置如下：
-- -------------------- ---- -------
------------ -
-------- ------
-------- ------
------- -
----- -------------------------
----- ---------
------- -----
--
------- -
----- ---------
---------- --
------- ------
--------- ----
------------------- ----
-
-cacheGroups 配置项
test
用于控制哪些模块可以被缓存组抽离为公共代码。
name
缓存组的名称。
chunks
控制哪些代码块应该被包含到公共代码块中。
minSize
同上。
priority
优先级。
reuseExistingChunk
用来复用已经存在的代码块，从而减少冗余代码。
示例代码
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ ------ ---- ---------
------ ----- ---- --------
----------------
---------- ------------
-------------------------------
--
-- -----------------
----- ---- - ----------------
-------------- - -
------ -------------
------- -
--------- ------------
----- ----------------------- -------
--
------------- -
------------ -
------- ------
-------- ------
-------- --
---------- --
------------ -
-------- ------
-------- ------
------- -
----- -------------------------
----- ---------
------- -----
--
------- -
----- ---------
---------- --
------- ------
--------- ----
------------------- ----
-
-
-
-
--通过以上配置，我们可以将来自 node_modules 中的模块打包到 vendor 文件中，将重复出现两次及以上的代码块打包到 common 文件中。
总结
splitChunks 作为 webpack 中一款优化工具，可以帮助我们最大化地利用模块化的特性，使得应用程序加载时间更快，响应速度更快。学习 splitChunks 配置方法的同时，我们还需要了解哪些代码块可以被分离出来，以及设置 cacheGroups 参数来优化代码分离效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ba16e9add4f0e0ff2a2dda