typescript - 如何在我的 React 项目中分析 TypeScript / TSLint 的缓慢处理瓶颈？

Question

我有一个 React 项目（使用 TypeScript 模板通过 Create-React-App 创建），其中包含大约 300 个文件（大约 24,000 行代码）。我们还添加了少量额外的项目依赖项，包括 Redux、React-Bootstrap 和 AWS Amplify。

VSCode 中的类型检查和 linting（使用 TSLint 插件）过去非常快。但是经过几个月的开发，VSCode 中 linting 和反馈的响应变得越来越迟钝，以至于类型错误和其他语言服务可能需要 30 秒或更长时间才能在编辑器中正确显示一个文件。

现在，如果我有一个包含数千个文件但只有大约 300 个文件的大型项目，我预计会出现一些缓慢，我不明白为什么处理如此缓慢。

（我希望 TSLint 和/或 TypeScript 可以缓存来自 node_modules 中的导入依赖项和项目 src 文件的部分构建工件（例如 AST 等），以便在修改单个文件时，它们不需要执行完整的重新从头开始构建。）

我想知道的是我可以采取哪些步骤来分析（或以某种方式调试或排除故障）TypeScript 和/或 TSLint 的处理，以找到以下部分或全部问题的答案：

• 某些 linting 规则是否需要很长时间才能运行？
• 哪些项目文件和/或包依赖项导致了最大的减速？
• 我的 src 文件中是否有特定的 TypeScript 类型定义、接口或其他语言结构可能会导致某种瓶颈或增加 TypeScript 或 TSLint 的处理复杂性？

我知道在单个文件甚至包级别可能无法回答上述某些问题，但我希望至少找出 TSLint 或 TypeScript 中是否内置任何“调试模式”功能可能会帮助我确定是什么让事情变慢了，或者开发人员过去成功使用了哪些其他策略来解决类似问题。

标签： typescriptperformancevisual-studio-codecreate-react-apptslint