Angular 15升级后构建时长增加问题咨询

一、排查 Angular Material 遗留组件迁移的影响 #

• 运行ng update @angular/material确认迁移是否彻底，未完成迁移的遗留组件可能触发额外兼容性处理逻辑，拖慢构建速度。
• 检查angular.json中是否开启 Material 优化配置"optimization": true，尝试用组件级导入替代全模块导入，减少不必要的模块编译量。
• 执行ng build --verbose，对比迁移前后的构建日志，重点关注与 Material 组件相关的样式处理、模板编译阶段的耗时变化。

二、排查 custom-webpack 构建器的影响 #

• 临时将angular.json中的构建器改回@angular-devkit/build-angular:browser，重新构建对比时长，若耗时明显下降，说明问题出在 custom-webpack 的配置上。
• 检查自定义 webpack 配置，排查是否添加了冗余的 loader、plugin，或存在未优化的编译选项（比如未启用缓存、sourceMap 配置不合理）。
• 确保 custom-webpack 配置中启用持久化缓存，比如设置cache: { type: 'filesystem' }，缓存失效会导致每次构建都全量重新编译所有模块。

三、通用排查步骤 #

• 执行ng build --stats-json生成构建统计文件，本地安装webpack-bundle-analyzer后运行npx webpack-bundle-analyzer dist/<项目名>/stats.json，查看模块编译耗时Top项，定位具体拖慢的环节。
• 检查tsconfig.json中的编译配置，确认target、module等是否符合 Angular 15 最佳实践，排查是否因启用新特性（如 partial compilation）导致耗时增加。
• 执行ng cache clean清理构建缓存后重新构建，排除缓存污染引发的异常耗时。

内容的提问来源于stack exchange，提问作者Gonzalo Diaz Ailan