分析Angular构建耗时：定位ng build性能瓶颈方案咨询

1. 用Angular CLI原生的profile功能 #

直接执行ng build --profile，会生成profile.json文件。这个文件记录了构建全流程各阶段（依赖解析、AOT编译、打包、代码优化等）的精确耗时。将文件拖进Chrome DevTools的Performance面板，就能看到可视化的时间线，一眼定位哪个步骤卡壳。
注意：别和Vite的VITE_PROFILE搞混，这是Angular CLI专属的性能分析参数。

2. 开启更细粒度的日志 #

• 试试ng build --verbose --stats-json，虽然你用过--verbose，但结合--stats-json后，生成的stats.json里藏着webpack各阶段的耗时数据，直接搜索time字段就能查看。另外webpack-bundle-analyzer也能切换视图展示流程耗时，不止局限于体积分析。
• 再加个环境变量：NG_CLI_ANALYTICS=verbose ng build，会输出CLI内部每一步的操作日志，连依赖加载、配置解析这类细节都能看到，方便定位慢在哪。

3. 自定义webpack钩子计时 #

如果内置工具不够用，给Angular添加自定义webpack配置：

1. 安装@angular-builders/custom-webpack
2. 在angular.json里把构建器替换为@angular-builders/custom-webpack:browser
3. 新建webpack.config.js，添加ProgressPlugin埋点：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProgressPlugin((percentage, message) => {
      console.log(`${new Date().toLocaleTimeString()} - ${(percentage * 100).toFixed(2)}%: ${message}`);
    })
  ]
};

这样构建时会实时输出每个阶段的时间和进度，精准定位耗时步骤。

4. 拆分排查特定环节 #

• 怀疑TypeScript编译慢？执行ng build --no-aot对比耗时，或者直接用tsc --diagnostics查看TS本身的编译耗时，检查是不是类型检查太复杂、增量缓存未生效。
• 怀疑第三方依赖拖慢？用ng build --vendor-chunk拆分依赖包，单独查看vendor chunk的打包耗时，排查是否引入了未按需加载的大型库。

5. 用Node.js性能分析工具抓调用栈 #

执行node --inspect-brk ./node_modules/@angular/cli/bin/ng build，然后打开Chrome DevTools找到Node调试入口，启动Performance录制。全程捕获构建的CPU调用栈，能精确到某个函数的执行耗时，适合排查深层性能瓶颈。

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