面试题：Webpack代码分离中splitChunks的常用配置项及作用

Question

请阐述Webpack中splitChunks插件的常用配置项，如chunks、minSize、minChunks等，并说明它们在代码分离过程中的具体作用。

Answer 1

chunks

• 含义：用于指定哪些chunk进行代码分割。可选值有'initial'（初始chunk）、'async'（异步chunk）、'all'（所有chunk）。
• 作用：决定对哪些类型的chunk进行代码拆分，例如设置为'async'，则只对异步加载的chunk进行拆分，有助于优化异步加载模块的加载性能。

minSize

• 含义：表示被提取的chunk的最小大小（以字节为单位）。
• 作用：如果拆分出来的代码块小于这个值，就不会进行拆分，避免拆分出过多过小的文件，增加请求数量，从而影响性能。例如设置为30000，小于30KB的代码块不会被单独拆分。

minChunks

• 含义：表示被拆分的模块至少被引用的次数。
• 作用：只有当模块被引用次数达到这个值时，才会被拆分出来。比如设置为2，只有被引用至少2次的模块才会被提取到公共chunk中，这样可以有效提取多个chunk共用的模块，避免重复代码。

maxAsyncRequests

• 含义：按需加载时，最大的并行请求数。
• 作用：限制按需加载时同时加载的文件数量，防止一次性请求过多文件导致网络拥塞，影响加载性能。例如设置为5，则最多同时请求5个文件。

maxInitialRequests

• 含义：入口点的最大并行请求数。
• 作用：控制入口chunk加载时的并行请求数量，优化初始页面加载性能，避免过多请求阻塞页面渲染。比如设置为3，入口chunk加载时最多同时请求3个文件。

cacheGroups

• 含义：用于定义缓存组，可对拆分出来的chunk进行更细粒度的控制。
• 作用：可以根据不同规则对代码进行分组拆分，例如将所有第三方库拆到一个vendors缓存组，将业务公共代码拆到另一个缓存组。通过配置test、priority等属性来灵活定义拆分规则和优先级。