Angular-CLI「保存即编译」性能低下问题排查求助

1. 获取Webpack更详细的日志 #

• 生成Webpack统计JSON文件：运行ng serve --stats-json，构建完成后会在项目根目录生成stats.json，文件包含Webpack构建的全量细节，包括每个模块的处理时长、依赖关系、资源大小等，可用于深入分析编译流程。
• 自定义Webpack日志级别：在项目根目录创建webpack.config.js（Angular 18支持直接扩展Webpack配置），添加如下配置提升日志详细度：

  module.exports = {
    stats: 'verbose' // 可选值：'debug'（最详细）、'verbose'、'normal'
  };
  

• 结合Node.js调试日志：运行NODE_DEBUG=webpack ng serve，可以输出Webpack内部的Node.js级别的调试日志，帮助定位模块解析、加载阶段的问题。

2. 调试/定位性能瓶颈的技术 #

TypeScript编译性能排查 #

• 在tsconfig.json中启用extendedDiagnostics：

  "compilerOptions": {
    "extendedDiagnostics": true
  }
  

  每次编译会输出TypeScript编译器的详细耗时统计，包括单个文件的编译时间、内存占用等，快速定位拖慢编译的TS文件。

Webpack构建阶段分析 #

• 使用Angular CLI的性能 profiling：运行ng serve --profile，构建完成后会生成chrome-profiler-events.json文件，打开Chrome DevTools的「Performance」面板，导入该文件即可查看编译过程中每个阶段的耗时（如模块解析、代码转换、打包等）。
• 用webpack-bundle-analyzer分析依赖：安装工具后，结合--stats-json生成的文件，运行webpack-bundle-analyzer stats.json，可视化展示模块依赖树，排查是否存在不必要的深层依赖或大模块导致重复编译。

Angular CLI配置优化（针对性调整） #

• 开启aot：开发环境下启用AOT编译（"aot": true），Angular 18对开发环境AOT做了大量优化，能显著提升热编译速度。
• 调整SourceMap配置：将sourceMap改为"cheap-module-source-map"或false，减少SourceMap生成的耗时（如果不需要完整源码映射的话）。
• 关闭namedChunks：设置"namedChunks": false，避免为每个模块生成命名块，减少编译时的额外处理。
• 禁用vendorChunk：尝试设置"vendorChunk": false，避免每次编译都重新处理第三方依赖模块（需测试是否影响开发体验）。

文件监听与系统层面排查 #

• 测试手动编译速度：运行ng serve --watch=false，手动修改文件后执行ng build，对比自动热编译的速度，判断是否是文件监听机制导致的延迟。
• Node.js性能分析：运行node --inspect-brk node_modules/@angular/cli/bin/ng serve，在Chrome DevTools的Node调试器中启动性能录制，追踪整个编译过程中函数调用的耗时，定位底层的性能瓶颈。

内容的提问来源于stack exchange，提问作者Stephen Paul