在前端工程化中，webpack 已经成为了一种不可避免的构建工具。webpack 通过各种插件和配置项的方式来实现各种构建功能，其中 splitChunks.optimization.splitChunks 是一项非常重要的优化配置。本篇文章将要探讨这个配置项的作用、用法及其合理性思考，帮助大家更好的利用它来加速项目构建。
splitChunks 配置项是什么？
在 webpack 的所有配置项中，optimization.splitChunks 是非常常用的一项优化配置。它主要的作用是将项目中的公共代码提取成公共文件，避免在每个页面间都会打包一次相同的代码。这样不仅可以减小文件大小，还可以减少浏览器下载资源的数量和请求次数，提升首屏渲染速度。
splitChunks 自webpack 4中开始引入，对于使用webpack 3的用户，提取公共代码的配置需通过使用 CommonsChunkPlugin 插件来实现。为了在 webpack 4 中方便处理Webpack从v3到v4的升级过程，Webpack 4在optimization代码块中引入了一个新的属性splitChunks以控制如何提取代码块到新的文件夹中（这也是前端开发生态系统中其他构建工具，如Rollup中的常见优化）。
splitChunks 如何使用？
我们可以通过在 webpack 配置文件中添加optimization.splitChunks选项来启用代码分离功能。常见的用法如下：
-------------- - -
------------- -
------------ -
------- -----
-
-
-这样我们就会发现在项目打包的时候会自动把公共的代码提取出来并打包成一个文件。
splitChunks 参数解析
splitChunks 中有很多参数需要我们来配置以达到最好的效果。下面我们来根据官网的文档一一了解一下。
chunks
-------------- - -
------------- -
------------ -
------- -----
-
-
-我们通过设置 chunks 来告诉 webpack 代码提取的时机。可选的值有：
- async：只提取异步代码中的公共模块。
- initial：只提取入口文件中的公共模块。
- all：同时提取异步和入口文件中的公共模块。
minSize
-------------- - -
------------- -
------------ -
-------- -----
-
-
-minSize 定义了被提取的chunk最小的大小。
minChunks
-------------- - -
------------- -
------------ -
---------- -
-
-
-minChunks 定义了至少被引用的次数。默认为1，即被引用一次即可被提取出来。
maxAsyncRequests
-------------- - -
------------- -
------------ -
----------------- -
-
-
-maxAsyncRequests定义了按需加载时，并行请求的最大值。
maxInitialRequests
-------------- - -
------------- -
------------ -
------------------- -
-
-
-maxInitialRequests定义了一个入口最大的并行请求数。
cacheGroups
-------------- - -
------------- -
------------ -
------------ -
-------- -
---------- --
--------- ----
------------------- -----
--
------- -
----- -------------------------
----- ----------
------- ------
--------- ---
-
-
-
-
-cacheGroups是一个选项对象，它允许您指定特定块的设置。
splitChunks 在实际项目中的应用
splitChunks 在实际项目中的应用是非常广泛的。以下我们为大家介绍两个例子，分别是按需加载时打包成单独的文件和多页面打包的情况。
按需加载时打包成单独的文件
-------------- - -
----- --------------
------ -
----- ----------------
--
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
------- ----------------
-
-
--
------------- -
------------ -
------- --------
-------- ------
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ---
--
-------- -
--------- ----
------------------- ----
-
-
-
-
-多页面打包的情况
-------------- - -
----- --------------
------ -
------ -----------------------
------ ----------------------
--
------- -
--------- ----------------------------
-------------- ----------------------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
------- ----------------
-
-
--
------------- -
------------ -
------- ------
----- ------
------------ -
-------- -
----- -------------------------
----- ----------
------- ------
---------- --
--------- ---
--
------- -
----- ---------
------- ----------
---------- --
--------- ---
-
-
-
-
-总结
本篇文章主要为大家详细介绍了 webpack 构建优化实验室 - splitChunks.optimization.splitChunks 配置项思考，这是一个非常重要的优化配置，可以帮助我们大大提升项目构建的速度和性能。我们可以通过设置不同的参数，结合实际情况来合理配置 splitChunks，使其工作得更加优美。最后提醒大家，在实际项目中使用 splitChunks 配置项时，一定要结合业务需求，避免过度优化，增加不必要的复杂度。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ff0f9695b1f8cacddb2b80