Angular Module Federation生成过多Chunk问题咨询

背景说明 #

我正在大型单体仓库中为Angular应用试用Module Federation。我们有数十个基于Angular Material的共享组件库，依赖Angular CDK与rxjs。当我尝试暴露一个使用部分共享组件的特性模块时，构建后生成了大量Chunk文件。

共享库列表（不含自研库）包含Angular Material、Angular CDK、rxjs等第三方依赖。

使用版本 #

• Angular v15
• Angular Material v15
• Angular CDK v15
• rxjs v7
• WebPack v5

我的问题 #

1. 生成如此多的Chunk是否属于正常现象？
2. 是否可按规则合并Chunk，比如将所有rxjs Chunk合并为单个文件？
3. 除Angular核心库外，如何选择联邦模块中需共享的库？

补充：若问题表述不清，可补充更多细节。我曾尝试用Webpack的cacheGroups合并Chunk但失败，似乎Webpack会跳过共享库的该配置；也尝试过不同共享库组合，部分有效但部分会抛出异常，不清楚选择必填共享库的准则。

问题解答 #

1. 生成大量Chunk是否正常？ #

这是正常但可优化的现象。Module Federation默认会将共享依赖拆分为独立Chunk，加上Angular Material/CDK本身内部有大量细粒度的子模块（比如每个组件都是单独的NgModule），Webpack会为每个被引用的子模块生成Chunk，最终导致数量较多。如果特性模块引用了多个Material组件，就会触发这种拆分。

2. 是否可以合并指定Chunk（如rxjs）？ #

可以实现，但不能直接通过常规cacheGroups，因为Module Federation的共享模块有特殊的拆分逻辑。你需要在Module Federation的shared配置中，对rxjs进行强制单Chunk配置：

// webpack.config.js 中的 ModuleFederationPlugin 配置
new ModuleFederationPlugin({
  // ...其他配置（如name、exposes等）
  shared: {
    rxjs: {
      singleton: true,
      strictVersion: true,
      version: '7.x',
      eager: false,
      // 关键：指定打包为单个Chunk文件
      filename: 'rxjs-shared.js'
    },
    // 其他需要合并的共享库可参考此配置
  }
})

同时，需要调整Angular的构建配置，禁用其默认的依赖拆分（针对共享库）：
在angular.json的对应项目build配置中添加：

"optimization": {
  "scripts": {
    "splitChunks": false
  }
}

注意：这种合并需要权衡，单Chunk会增加初始加载体积，适合rxjs这类几乎全量使用的依赖；对于Material这类按需引入的组件，不建议全量合并，否则会引入未使用的冗余代码。

3. 如何选择联邦模块需共享的库？ #

遵循以下准则：

• 高频跨模块复用的依赖：比如rxjs、Angular CDK、Material的核心模块（如@angular/material/core），这些是多个联邦模块都会用到的基础依赖。
• 批量匹配共享库：不要单独共享Angular Material的单个组件（如@angular/material/button），而是通过通配符批量匹配上层模块：

shared: {
  '@angular/material/*': {
    singleton: true,
    strictVersion: true,
    version: '15.x'
  },
  '@angular/cdk/*': {
    singleton: true,
    strictVersion: true,
    version: '15.x'
  }
}

• 版本必须统一：共享库的版本必须在所有联邦应用中保持一致，否则会抛出版本冲突异常，这也是尝试不同组合时出错的核心原因。
• 单实例依赖必须开启singleton：对于状态管理、RxJS这类依赖单实例的库，必须设置singleton: true，避免多个实例导致的逻辑异常。
• 排除非跨模块依赖：如果自研共享组件库的私有依赖不会被其他联邦模块直接引用，不需要加入共享配置。

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