面试题：Webpack中SplitChunksPlugin如何配置以实现公共模块的拆分

Question

请阐述在Webpack中使用SplitChunksPlugin配置公共模块拆分的主要参数及它们的作用，例如如何设置minSize、minChunks等参数，以及在一个简单的多入口应用场景下如何配置该插件以拆分出公共的第三方库模块。

Answer 1

主要参数及作用

1. minSize：
   • 作用：表示要提取的 chunk 的最小大小（单位为字节）。如果生成的 chunk 大小小于这个值，就不会被拆分出来。例如设置 minSize: 30000，即 30KB，小于 30KB 的模块不会被拆分作为单独的 chunk。
2. minChunks：
   • 作用：指定模块在多少个入口 chunk 中被引用时才会被拆分出来。例如设置 minChunks: 2，表示一个模块至少在两个入口 chunk 中被引用，才会被提取为公共 chunk。
3. chunks：
   • 作用：决定哪些 chunk 应该被处理。取值有 'all'（所有 chunk）、'async'（异步 chunk）、'initial'（初始 chunk）。例如设置 chunks: 'async'，只会处理异步加载的 chunk。
4. name：
   • 作用：指定拆分出来的公共 chunk 的名称。可以是字符串，也可以是函数。例如 name: 'commons'，拆分出的公共模块会命名为 commons.js。如果是函数，函数接收 chunk 等参数，可根据具体逻辑动态生成名称。
5. cacheGroups：
   • 作用：用于更细粒度地控制拆分策略，可以定义多个缓存组，每个缓存组都有自己的规则。例如，可以根据模块路径、模块来源等条件进行拆分。

多入口应用场景下拆分公共第三方库模块的配置示例

module.exports = {
    //...其他 webpack 配置
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name:'vendors',
                    chunks: 'all'
                }
            }
        }
    }
};

在上述配置中：

• cacheGroups.vendor 定义了一个名为 vendor 的缓存组。
• test: /[\\/]node_modules[\\/]/ 表示匹配来自 node_modules 的模块。
• name:'vendors' 设置拆分出来的公共第三方库模块名为 vendors.js。
• chunks: 'all' 表示对所有类型的 chunk 都进行处理，确保第三方库模块无论在初始加载还是异步加载的 chunk 中，只要符合条件都会被拆分出来。