面试题：Webpack代码分割中如何使用splitChunks进行第三方库的拆分

Question

在一个使用Webpack构建的前端项目中，项目依赖了多个第三方库如lodash、axios等，阐述如何通过Webpack的splitChunks配置将这些第三方库拆分出来形成单独的chunk，以实现更好的缓存和加载性能，并给出相应的Webpack配置示例。

Answer 1

1. 原理

Webpack 的 splitChunks 配置允许我们将公共模块从入口 chunk 中提取出来，生成单独的文件。这样在浏览器加载时，如果这些公共模块（如第三方库）没有变化，就可以直接从缓存中读取，提高加载性能。

2. Webpack 配置示例

module.exports = {
  //...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'vendors',
      minSize: 30000,
      minChunks: 1,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

• chunks: 'all'：表示对所有类型的 chunk（initial、async、all）都进行拆分。
• name: 'vendors'：拆分出来的 chunk 的名称为 vendors。
• minSize: 30000：表示被拆分出来的模块最小大小为 30kb（30000 字节），小于这个大小不会被拆分。
• minChunks: 1：表示被拆分出来的模块至少被引用 1 次。
• cacheGroups：缓存组，用于更细粒度地控制拆分规则。
  • vendors 缓存组：test: /[\\/]node_modules[\\/]/ 表示匹配 node_modules 中的模块，priority: -10 表示优先级为 -10 。
  • default 缓存组：minChunks: 2 表示至少被引用 2 次才会被拆分，priority: -20 优先级比 vendors 低，reuseExistingChunk: true 表示如果当前 chunk 包含的模块已经被拆分过，就复用已有的 chunk 而不是重新生成。