Angular中ModuleFederationPlugin结合chunk分组的配置异常问题

核心问题根源 #

直接禁用splitChunks.default缓存组会破坏Webpack默认的chunk复用逻辑，而Module Federation的跨应用chunk共享正是依赖这个逻辑来识别并复用Shell已加载的模块。同时如果自定义cacheGroups时未处理好优先级和覆盖范围，会导致初始chunk仍引用未被正确分组的零散chunk。

正确配置方案 #

1. 保留default缓存组并调整参数 #

不要完全删除default组，而是通过优先级让自定义分组优先匹配，同时让default组只处理剩余的异步chunk，保留复用逻辑：

splitChunks: {
  cacheGroups: {
    // 自定义业务代码分组，优先级高于default
    business: {
      test: /[\\/]src[\\/]business[\\/]/,
      name: 'business-chunk',
      chunks: 'all',
      priority: 10 // default默认优先级为0
    },
    // 保留default组，限制仅处理异步chunk，开启复用
    default: {
      chunks: 'async',
      priority: 0,
      reuseExistingChunk: true // 关键：允许复用已加载的chunk
    }
  }
}

2. 单独配置共享依赖分组 #

针对Module Federation中声明的共享依赖（如@angular/core、rxjs等），单独设置缓存组，确保它们被统一归类，避免被打散：

splitChunks: {
  cacheGroups: {
    // 共享依赖专属分组，优先级最高
    shared-vendors: {
      test: /[\\/]node_modules[\\/](@angular|rxjs|zone.js)[\\/]/,
      name: 'shared-vendors',
      chunks: 'all',
      priority: 20,
      reuseExistingChunk: true
    },
    // 自定义业务分组
    business: {
      test: /[\\/]src[\\/]business[\\/]/,
      name: 'business-chunk',
      chunks: 'all',
      priority: 10
    },
    // 保留default处理剩余异步模块
    default: {
      chunks: 'async',
      priority: 0,
      reuseExistingChunk: true
    }
  }
}

3. 验证与调试 #

构建后使用Webpack Bundle Analyzer查看chunk依赖树，确认：

• 初始chunk仅依赖预期的分组chunk
• 共享模块全部归入统一的shared-vendors分组

关键配置要点 #

• reuseExistingChunk: true是Module Federation共享生效的核心，必须开启，它让Webpack优先复用已加载的chunk而非重新加载
• 合理设置cacheGroups的priority，确保共享依赖和业务代码被正确分组，避免冲突
• 避免直接禁用default缓存组，而是缩小其作用范围，让它处理自定义分组未覆盖的模块

内容的提问来源于stack exchange，提问作者Rakesh A