Angular.json中commonChunk的作用及使用详解

在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 配置项启用：

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

注意事项

• Angular 8+ 后，commonChunk 逐渐被更先进的打包策略（如 Webpack 4 的 SplitChunksPlugin）替代，配置方式可能有所不同。

  

• 过度拆分可能导致过多小文件，需权衡缓存收益与 HTTP 请求开销。
• 生产环境下默认启用优化，开发环境下通常关闭以加快构建速度。

总结 

到此这篇关于Angular.json中commonChunk的作用及使用的文章就介绍到这了,更多相关Angular.json中commonChunk作用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论