面试题：Webpack SplitChunksPlugin专家难度面试题

Question

假设你正在开发一个微前端架构的项目，各个子应用都有自己独立的Webpack配置。现在需要通过SplitChunksPlugin来实现跨子应用的公共代码提取和缓存优化，同时要确保子应用之间的隔离性。请详细描述你的实现思路和具体配置方案。

Answer 1

实现思路

1. 公共代码识别：分析各子应用代码，找出可能存在的跨子应用公共代码，例如一些通用的库（如lodash、axios等）。
2. 隔离性保证：每个子应用保持自己独立的运行环境和依赖，避免公共代码提取影响子应用隔离。通过Webpack的模块作用域等特性确保各子应用代码不相互干扰。
3. 缓存优化：合理配置SplitChunksPlugin，将公共代码提取到单独的chunk中，利用浏览器缓存机制，当公共代码不变时，浏览器可直接从缓存加载，提高加载性能。

具体配置方案

在每个子应用的Webpack配置文件（通常是webpack.config.js）中：

module.exports = {
  //...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 2, // 被至少两个子应用使用
          enforce: true
        }
      }
    }
  }
};

• chunks: 'all'：表示对所有类型的chunk（initial、async、all）都进行公共代码提取。
• cacheGroups.commons：定义了一个名为commons的缓存组。
  • name: 'commons'：指定提取出的公共代码chunk的名称。
  • chunks: 'initial'：表示只对入口chunk进行公共代码提取。
  • minChunks: 2：只有当某模块被至少两个子应用使用时，才会被提取到公共chunk中。
  • enforce: true：强制提取符合条件的模块到该缓存组。

通过上述配置，既实现了跨子应用公共代码的提取和缓存优化，又保证了子应用之间的隔离性。