Angular 工程 ng build 构建提速

Question

公司项目统一都使用 angular-cli 来搭建工程环境，从 Angular2 到 Angular8 版本都经历了，老项目都基本升级到 Angular4、6，新一点的项目，ng 版本都是7、8了。许多项目构建的速度，一直都是正常的表现，某一两个项目表现的比较异常，这不得不采取相关改进措施。

Angular 生产环境构建打包 ng build --prod 是开启了 AOT （为什么要AOT编译），ng build 构建配置项也比较多，含义介绍见文档：build，常见配置属性设置如下：

"prod": {
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "fileReplacements": [
    {
      "replace": "src/environments/environment.local.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ]
}

同样的配置，在不同的项目，构建时间长短也是不一样的。所以影响项目构建时间的原因可能有：

• 项目代码问题（结构，路由划分，代码规范）
  后期优化的可能性小，所以前期需要做好规范限制；
• 代码量（系统越大，ts文件越多，构建时间会越长）
  和系统大小有关，建议根据模块和路由划分，来加载划分一些模块代码，对构建生成的chunk大小也有帮助；
• 第三方依赖（ node_modules 依赖第三方的模块数量）
• Angular CLI 版本（cli 自身问题）
  关注版本变化更新日记
• angular.json 配置影响
• 系统硬件性能（ 16G 的iMac 明显比 16G内存的Windows 10系统快两倍多）
• 变更脚手架 （改用SystemJS 和 Webpack 搭建环境，不用ng-cli）

解决方案探索

Tips: 我们构建默认都统一加大了node.js的执行内存

我们有个项目，再上线工单系统的页面之后，多出了10分钟的构建时间，构建时间在 15~20分钟 区间浮动。截图是 Gitlab CI/CD Build Job 的（iMac 是8分钟内）

本地iMac的构建速度：

至于为什么 构建参数、配置不变的情况下，iMac 构建会比 gitlab runner（Linux 以及 Windows 系统）快很多，初步单纯认为是硬件性能的影响。我们项目持续集成服务器是 Linux 非 iMac，所以优化的时候，以CI/CD服务器构建效果的速度作为参考。

找到构建过程最慢的点

构建过程最慢的有两个地方分别是79% 和92%的操作：

79% chunk modules optimization ModuleConcatenationPlugin
92% chuck asset optimization

所有慢的构建都在这里浪费时间的，有网友是这么描述：

I've just upgraded my CLI to 1.7.2 (I've double checked the node_modules and --version) and a my build time has gone from about 15 seconds to infinity
It hangs forever at "92% chunk asset optimization", I've waited more than 10 mins before giving up
It's a very small app

理解这两个过程是干了什么，然后再去查找解决方案。官方文档是这么描述着两个属性配置的：

buildOptimizer=true|false	Enables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option.Default: false
optimization=true|false	Enables optimization of the build output.

关闭 optimization 和 buildOptimizer

经实践，修改着两个配置属性为false后，构建就提速多倍，如图

又得必有失，从图中也可以看出来，提速了，但是单个文件代码体积明显提升了，因为关闭了optimization ，输出的文件体积没有做优化。