VS Code+TypeScript（NX项目）：如何定位性能瓶颈？

一、使用VS Code内置性能分析器 #

• 打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），输入 Developer: Start Performance Profile 并执行。
• 复现导致卡顿的操作：比如打开包含复杂生成类型的文件、触发代码检查/类型校验等。
• 操作完成后，再次打开命令面板，执行 Developer: Stop Performance Profile。VS Code会自动生成一个 .cpuprofile 文件。
• 打开该文件，通过火焰图查看耗时最高的任务。重点关注与TypeScript语言服务、ESLint、NX相关的进程，这些通常是大型项目性能问题的来源。

二、TypeScript语言服务专项分析 #

TypeScript的类型校验和代码提示慢是常见问题，可通过日志定位具体耗时环节：

• 在VS Code设置（settings.json）中添加："typescript.tsserver.log": "verbose"。
• 复现慢操作后，打开命令面板执行 TypeScript: Open TS Server Log。
• 查看日志中的时间戳和耗时统计，比如搜索包含 Elapsed time 的条目，找到耗时较长的操作（如类型检查、模块解析、生成类型处理等）。这些条目会明确指出是哪些文件或类型定义导致的延迟。

三、ESLint代码检查性能分析 #

如果代码检查耗时突出：

• 在settings.json中开启ESLint调试："eslint.debug": true。
• 复现慢操作后，打开VS Code的「输出」面板，选择「ESLint」日志。
• 日志中会显示每个lint规则的执行时间，定位耗时最长的规则。考虑禁用非必要规则，或优化规则配置（如缩小规则作用范围）。

四、NX相关排查 #

对于NX monorepo：

• 在VS Code性能分析器中关注NX扩展的进程耗时，确认是否是扩展本身的性能问题。
• 确保NX Daemon处于运行状态（NX会自动启动），它能缓存依赖和构建信息，提升整体响应速度。

额外优化建议 #

• 暂时禁用其他非核心扩展，排查是否存在扩展冲突导致的性能下降。
• 升级VS Code、TypeScript、ESLint及NX相关扩展到最新版本，新版本通常会修复性能漏洞。
• 对复杂生成类型进行拆分，避免单个文件包含过多大型类型定义，减轻TypeScript语言服务的负担。

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