Angular.json中的commonChunk 的作用

crary,记忆2025-12-04 9:32

在Angular MFE项目中使用了自定义的webpack.config.js时，在结合Module_Federation中导出expose 设置为standalone：true的Component，然后host项目又使用了Module_Federation去引入导出的文件，向下面这样导入:

但是实际得到的结果是下面这样

但是预期结果应该是下面这样:

解决办法如下：

详解commonChunk

commonChunk 在 Angular 中的作用

commonChunk 是 Angular CLI 在构建过程中用于优化代码拆分的一个配置选项，主要用于提取多个入口文件或模块之间的公共依赖代码，生成独立的共享代码块（common chunk）。以下是其核心作用：

减少重复代码

通过将多个模块或组件共用的依赖（如第三方库、框架代码）提取到单独的 common.js 文件中，避免这些代码在多个生成的包中重复出现，从而减小整体打包体积。

提升缓存利用率

公共代码块独立后，浏览器可以缓存该文件，后续页面加载时直接复用缓存，减少网络请求和下载时间。尤其适用于多页应用或懒加载模块的场景。

优化加载性能

在懒加载模式下，用户访问不同路由时，公共依赖只需加载一次。后续路由切换时，仅需加载差异部分的代码，显著提升应用性能。

配置方式

在 Angular CLI 的早期版本（如 Angular 5+），可通过 angular.json 中的 optimization 配置项启用：

json 复制代码

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "optimization": {
              "commonChunk": true
            }
          }
        }
      }
    }
  }
}

注意事项

Angular 8+ 后，commonChunk 逐渐被更先进的打包策略（如 Webpack 4 的 SplitChunksPlugin）替代，配置方式可能有所不同。
过度拆分可能导致过多小文件，需权衡缓存收益与 HTTP 请求开销。
生产环境下默认启用优化，开发环境下通常关闭以加快构建速度。