使用Module Federation共享库后，如何合并Chunk提升首页性能？

环境与背景 #

• 使用 webpack 版本：5.88.1，此内容并非 Bug 反馈，属于性能优化场景
• 公司业务逻辑复杂，采用微前端架构，使用 Module Federation（MF）已有一年多，此前仅在多项目间共享 React 组件，未共享基础库
• 今年聚焦微前端性能提升，将 UI 组件打包为独立 npm 包并通过 MF 共享，发现 MF 默认会将每个组件拆分为独立 Chunk；测试表明，相比依赖 HTTP2 多路复用，更少的 Chunk 能显著提升页面性能

已尝试方案及问题 #

• optimization.splitChunks.cacheGroups 合并 Chunk：MF 的组件代码拆分优先级更高，合并效果未达预期
• 设置 eager: true：首页组件 Chunk 数量明显减少，性能提升，但 remoteEntry.js 体积大幅增大
  • 我们将 remoteEntry.js 视为轻量资源清单，希望其体积小巧，但当前消费项目通过带时间戳或 no-cache header 加载它，过大体积直接影响性能
  • 测试发现开启 eager 后，remoteEntry.js 和 main.js 重复包含 react、react-dom 代码，存在冗余
  • 对 remoteEntry.js 采用无缓存策略并非最佳实践
• 曾考虑构建两个版本代码：一个开启 eager: true 且不配置 exposes，另一个关闭 eager: true 且配置 exposes，但该方案过于繁琐，需更优解

优化建议 #

1. 自定义 MF Chunk 拆分规则 #

结合 ModuleFederationPlugin 配置与 splitChunks，手动指定共享组件的 Chunk 分组，提高自定义缓存组的优先级以覆盖 MF 默认拆分行为：

new ModuleFederationPlugin({
  name: 'uiComponents',
  filename: 'remoteEntry.js',
  exposes: {
    './HomeBundle': './src/components/home/index.js',
    './CommonBundle': './src/components/common/index.js'
  },
  shared: {
    react: { singleton: true, requiredVersion: '^18.0.0' },
    'react-dom': { singleton: true, requiredVersion: '^18.0.0' }
  }
}),
optimization: {
  splitChunks: {
    cacheGroups: {
      mfComponentBundles: {
        test: /[\\/]src[\\/]components[\\/]/,
        name: 'mf-component-bundles',
        chunks: 'all',
        priority: 15 // 高于 MF 默认拆分优先级
      }
    }
  }
}

将同类型组件打包到同一 Chunk，既减少 Chunk 数量，又避免 remoteEntry.js 体积膨胀。

2. 分离 remoteEntry 与共享代码 #

• 让 remoteEntry.js 仅作为轻量级资源清单，将共享基础库、公共组件打包到独立 Chunk（如 mf-vendors.js）
• 消费项目通过预加载 mf-vendors.js（利用 CDN 长期缓存），remoteEntry.js 仅负责触发对应组件 Chunk 的加载，即使无缓存加载 remoteEntry.js，也因体积小巧不会造成性能损耗

3. 调整 remoteEntry 的缓存策略 #

• 为 remoteEntry.js 设置短时间缓存（如 5 分钟），同时配合版本号命名（如 remoteEntry.v3.js），而非完全无缓存
• 发布新版本时更新 remoteEntry 的版本号，消费项目通过版本号加载，既保证能获取最新代码，又减少重复加载的性能消耗

4. 优化 shared 配置减少冗余 #

确保所有共享库（如 react、react-dom）通过 shared 配置设置 singleton: true，避免重复打包到 remoteEntry.js 和消费项目的 Chunk 中，消除代码冗余

内容的提问来源于stack exchange，提问作者陈师东