Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular 工程 ng build 构建提速 #33

Open
giscafer opened this issue Aug 30, 2019 · 0 comments
Open

Angular 工程 ng build 构建提速 #33

giscafer opened this issue Aug 30, 2019 · 0 comments

Comments

@giscafer
Copy link
Owner

giscafer commented Aug 30, 2019

公司项目统一都使用 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 ,输出的文件体积没有做优化。

其他手段

……未完待续


参考资源:


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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant