Angular12升级至13后生产构建时间从1分钟内增至10分钟以上是何原因?
Angular 12升级13后生产构建耗时陡增的原因及排查方案
你使用的ng build --configuration production是Angular 13官方指定的生产构建命令,不存在操作失误问题,耗时大幅上升通常是以下原因导致:
- 默认构建规则收紧:Angular 13默认对生产构建开启了更严格的全量优化逻辑,包括更深层次的tree-shaking、样式前缀自动补全、严格类型校验、Ivy编译全量检查,对比Angular 12的默认生产配置,新增了多项默认开启的优化步骤,会直接拉长构建耗时。
- 第三方依赖兼容开销:未适配Angular 13 Ivy标准的第三方依赖,会在构建时被CLI自动执行前置兼容转换,这部分额外的编译逻辑通常是构建耗时翻倍甚至十倍增长的核心原因,可以排查项目依赖中是否存在长期未更新、仅支持Angular 12及更早版本的第三方包。
- 构建缓存不兼容:Angular 13的构建缓存结构和Angular 12完全不互通,升级后首次构建会全量编译所有业务代码和依赖,若未手动开启Angular 13的持久化缓存,后续每次构建都会执行全量编译,无法复用缓存内容。
- 未启用ESBuild构建器:Angular 13新增了ESBuild构建器支持,对比旧版Webpack构建器速度提升可达5~10倍,默认依旧使用旧Webpack构建器,未手动切换的情况下无法享受性能提升。
优化方案
- 调整
angular.json生产配置项,根据项目需求关闭非必要的优化开关,比如不需要极高压缩率的场景可关闭vendorChunk、extractLicenses等非核心优化项。 - 升级所有第三方依赖到适配Angular 13的版本,消除Ivy兼容转换的额外开销。
- 开启持久化构建缓存,在
angular.json的cli节点下添加如下配置:
{ "cli": { "cache": { "enabled": true, "path": ".angular/cache", "environment": "all" } } }
- 条件允许的情况下将构建器切换为ESBuild,可大幅压缩构建耗时。
内容的提问来源于stack exchange,提问作者Jalaleddin Hosseini
相关产品推荐
相关产品推荐

