Angular 工程 ng build 构建提速

Angular 工程 ng build 构建提速

公司项目统一都使用 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分钟内)

angular-build-15min

本地iMac的构建速度:

angular-build1

至于为什么 构建参数、配置不变的情况下,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后,构建就提速多倍,如图

angular_optimization_false

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

其他手段

……未完待续


参考资源:

  • https://www.bountysource.com/issues/46543750-build-with-ng-prod-is-extremely-slow
  • https://github.com/angular/angular-cli/issues/6795

Author: @giscafer,原文地址:front-end-manual/issues/33 , 欢迎讨论


欢迎前往原文讨论:https://github.com/giscafer/blog/issues/33

相关文章