Angular Material 14升级15后ng serve中webpack.Compiler的make hook耗时过长求优化

迁移Angular Material从14版本到15版本后，执行ng serve --verbose时发现webpack.Compiler的make hook阶段耗时异常（达571017.1161ms），以下是针对性的优化思路：

构建日志详情 #

LOG from webpack.Compiler
<t> make hook: 571017.1161 ms
<t> finish make hook: 0.0854 ms
<t> finish compilation: 116.4237 ms
<t> seal compilation: 1475.5701 ms
<t> afterCompile hook: 0.3705 ms
<t> emitAssets: 789.1355 ms
<t> emitRecords: 0.227 ms

优化建议 #

• 优化Material导入方式：确保使用@angular/material/*的按需导入，避免导入整个@angular/material模块，15版本的摇树优化更严格，冗余导入会大幅增加解析耗时。
• 对齐依赖版本：确认Angular CLI、@angular/core、@angular/cdk与Material 15版本完全匹配，使用npm update升级到对应版本的最新补丁，修复已知的性能兼容问题。
• 禁用开发环境类型检查：在angular.json的projects.[your-project].architect.build.options中设置"skipTypeCheck": true，减少TypeScript类型解析对make阶段的耗时占用。
• 启用webpack缓存：确保angular.json中build.options.cache设为true，开发环境下复用编译缓存，避免重复执行模块解析和构建步骤。
• 排查重复依赖：使用npm ls @angular/cdk检查是否存在多版本依赖冲突，通过npm dedupe合并重复依赖，减少webpack解析时的冗余工作。
• 分析构建瓶颈：执行ng build --stats-json生成统计文件，使用webpack-bundle-analyzer工具定位make阶段耗时最长的模块或依赖，针对性优化。
• 调整样式导入策略：Material 15的主题样式导入方式有所变化，避免在全局样式中导入未优化的组件样式，改用组件级别的样式导入或直接引用预构建的主题CSS文件。

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