面试题：Webpack SplitChunksPlugin深度定制及性能调优

定制思路

分析模块引用关系：Webpack在构建过程中会生成模块依赖图。通过分析这个依赖图，我们可以了解模块之间的引用关系。对于被多个入口或模块频繁引用的模块，将其拆分出来作为公共chunk可以减少重复代码。例如，一些通用的工具函数库（如lodash）可能被多个业务模块使用，将其单独拆分可以避免在每个chunk中重复打包。
考虑体积大小：Webpack在处理模块时会计算模块的体积。对于体积较大的模块，如果不拆分可能会导致单个chunk过大，影响加载性能。可以设置一个体积阈值，当模块体积超过该阈值时，考虑将其单独拆分。例如，大型的图表库（如echarts），如果整体打包在一个chunk中可能导致该chunk体积过大，可将其拆分。
关注使用频率：通过分析模块在项目中的使用频率，对于高频使用的模块优先拆分出来。在Webpack构建过程中，可以通过自定义插件或在优化阶段分析模块被引用的次数来确定使用频率。高频使用的模块如项目中的基础样式文件、常用的UI组件库等，拆分出来可使它们更快地被缓存。

高级配置

minSize：
- 作用：设置拆分chunk的最小大小。只有当模块或chunk的大小超过此值时才会被拆分。
- 示例：

module.exports = {
  optimization: {
    splitChunks: {
      minSize: 30000, // 30kb，默认值
    }
  }
};

maxSize：
- 作用：设置拆分chunk的最大大小。如果chunk超过这个大小，Webpack会尝试进一步拆分它。
- 示例：

module.exports = {
  optimization: {
    splitChunks: {
      maxSize: 200000, // 200kb
    }
  }
};

minChunks：
- 作用：设置模块被拆分出来的最小引用次数。只有当模块被引用次数达到或超过此值时才会被拆分。
- 示例：

module.exports = {
  optimization: {
    splitChunks: {
      minChunks: 2, // 被引用2次及以上才拆分
    }
  }
};

cacheGroups：
- 作用：通过cacheGroups可以定义多个缓存组，每个缓存组可以根据不同的规则来拆分chunk。例如，可以定义一个专门用于拆分第三方库的缓存组，另一个用于拆分项目内公共模块的缓存组。
- 示例：

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name:'vendors',
          chunks: 'all'
        },
        commons: {
          name: 'commons',
          minChunks: 2,
          chunks: 'initial'
        }
      }
    }
  }
};

在上述示例中，vendor缓存组用于拆分来自node_modules的模块，命名为vendors；commons缓存组用于拆分项目内被至少2个入口chunk引用的公共模块，命名为commons。

星途面试题库

面试题：Webpack SplitChunksPlugin深度定制及性能调优

知识考点

面试题答案

定制思路

高级配置