如何在VS Code的TypeScript项目中按文件测量保存动作性能？

1. 用TypeScript内置追踪工具生成性能报告 #

• 给tsc命令加上--generateTrace参数，比如执行tsc --generateTrace ./trace-logs，TypeScript会在指定目录生成JSON格式的性能追踪文件。
• 打开Chrome浏览器，输入chrome://tracing，加载生成的文件，就能看到每个文件在类型检查、编译等阶段的具体耗时，精准定位慢文件。
• 注意：这个功能从TypeScript 4.4版本开始支持，完全覆盖保存时的重新编译流程。

2. 用VS Code内置工具分析实时保存耗时 #

• 按下Ctrl+Shift+I打开VS Code开发者工具，切换到「Performance」面板，点击录制按钮后触发文件保存，录制结束后停止。
• 在结果里搜索typescript，展开相关任务就能看到单个文件的处理耗时，比如checkProgram阶段里各文件的耗时占比。
• 还可以开启VS Code设置里的typescript.tsserver.log为verbose，然后通过命令面板的「TypeScript: Open TS Server Log」查看日志，里面会直接记录Processing file: xxx.ts took xxx ms这类条目。

3. 写自定义脚本快速验证单个文件耗时 #

• 用Node.js结合TypeScript API写个简单脚本，手动模拟保存时的类型检查流程，直接输出单个文件的耗时：

import * as ts from 'typescript';
import { performance } from 'node:perf_hooks';

// 替换成你的项目配置和目标文件
const configPath = ts.findConfigFile('./', ts.sys.fileExists, 'tsconfig.json');
const config = ts.readConfigFile(configPath!, ts.sys.readFile);
const targetFile = './src/slow-file.ts';

const program = ts.createProgram({
  rootNames: [targetFile],
  options: config.config.compilerOptions,
});

const start = performance.now();
program.getPreEmitDiagnostics(); // 模拟类型检查过程
const end = performance.now();

console.log(`${targetFile} 处理耗时: ${Math.round(end - start)}ms`);

• 优化前后分别运行这个脚本，就能快速对比单个文件的性能变化。

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