面试题：Webpack中SplitChunksPlugin如何配置以避免基础库的重复打包

Question

假设项目中使用了Vue、Axios等基础库，阐述如何通过SplitChunksPlugin的配置，将这些基础库单独打包成一个文件，避免在多个chunk中重复打包，给出具体配置示例及关键参数解释。

Answer 1

在Webpack中使用SplitChunksPlugin可以将基础库单独打包，以下是具体配置示例及关键参数解释：

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all',
            name: 'vendors',
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        }
    }
};

关键参数解释：

• chunks：指定要拆分的 chunks，'all'表示所有的chunk，包括异步和同步的chunk。
• name：打包后的文件名，这里设置为'vendors'，打包后的文件可能是vendors.js等。
• minSize：模块被拆分出来的最小大小，单位是字节，默认是30000（30kb），只有大于这个大小的模块才会被拆分。
• minChunks：模块至少被引用的次数，默认是1，表示只要被引用一次就可以拆分。
• maxAsyncRequests：按需加载时并行加载的最大请求数，默认是5。
• maxInitialRequests：入口点并行请求的最大数目，默认是3。
• automaticNameDelimiter：打包后的文件名中分隔符，默认是'~' 。
• cacheGroups：缓存组，用于更细粒度的配置拆分规则。
  • vendors：自定义的缓存组，test属性用于匹配node_modules中的模块，priority表示优先级，数值越大优先级越高，这里设置为-10。
  • default：默认的缓存组，minChunks设置为2，表示至少被引用两次的模块会被拆分到这个组，priority设置为-20，reuseExistingChunk表示如果当前的chunk包含已从主bundle中拆分出的模块，则重用该模块，而不是再次生成新的模块。