Angular 工程 ng build 构建提速 - 文章教程

Angular 工程 ng build 构建提速

发布于 2020-11-03 字数 4292 浏览 2693 评论 0

公司项目统一都使用 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 工程 ng build 构建提速

本地iMac的构建速度:

Angular 工程 ng build 构建提速

至于为什么 构建参数、配置不变的情况下,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 工程 ng build 构建提速

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3