使用 eslint 的 Angular 项目超级慢

Question

我有一个由 590 个 TypeScript 文件组成的 Angular12 项目。当我这样做时ng lint，它会运行 TSLint 并在大约 5 秒内完成。尽管如此，我尝试按照 Angular官方视频中的说明升级到 eslint ，现在ng lint需要 10 多分钟（实际上我没有让该过程完成，我在 10 分钟处停止了）。

我尝试隔离问题以了解原因是否是ng这样，eslint因此我全局安装了 eslint，npm i -g eslint并使用单个文件的计时信息运行它：

time TIMING=1 eslint /home/user/my-file.ts

即使是这个单个文件也需要 2 分钟以上。奇怪的是，eslint报告每条规则只花了几毫秒，而 Linux 却说花了 148 秒（这是准确的，花了 2 分钟多）：

Rule                                        | Time (ms) | Relative
:-------------------------------------------|----------:|--------:
@angular-eslint/no-conflicting-lifecycle    |     0.342 |    35.9%
@angular-eslint/no-input-rename             |     0.163 |    17.1%
@angular-eslint/template/banana-in-box      |     0.161 |    16.9%
@angular-eslint/no-output-rename            |     0.103 |    10.9%
@angular-eslint/component-class-suffix      |     0.100 |    10.5%
@angular-eslint/contextual-lifecycle        |     0.083 |     8.7%
@angular-eslint/directive-class-suffix      |     0.000 |     0.0%
@angular-eslint/no-empty-lifecycle-method   |     0.000 |     0.0%
@angular-eslint/no-host-metadata-property   |     0.000 |     0.0%
@angular-eslint/no-inputs-metadata-property |     0.000 |     0.0%
Rule | Time (ms) | Relative
:----|----------:|--------:
TIMING=1 eslint   148.14s user 4.47s system 190% cpu 1:19.96 total

如何让 eslint 运行得更快？

Answer 1

根本问题仍然是 TypeScript 编译器生成 AST（抽象语法树）的开销，以及 @typescript-eslint/typescript-estree 将此 AST 转换为 ESLint 兼容 AST 的工作。

然而，有一些小的调整：

• 设置.eslintignore为忽略不相关的目录，例如node_modules非 TypeScript 文件
• 运行 eslint 时使用该--cache标志：eslint --cache \*\*/\_.ts.存储有关已处理文件的信息，以便仅对更改的文件进行操作，或者您angular.json可以lint使用"cache": true.

还有一篇关于TypeScript 性能的整篇文章建议：

• 使用 include 属性进行设置tsconfig.json，以仅指定项目中包含应编译的 TypeScript 文件的输入文件夹。
• 避免添加太多排除和包含文件夹，因为必须通过遍历包含的目录来发现 TypeScript 文件，因此运行许多文件夹实际上会减慢编译速度。

Answer 2

查看 Angular es-lint 指南中的性能注释

我建议仔细阅读本节标题为“ Angular ts-lint 到 es-lint 迁移指南的性能注释”的部分。

您可以通过运行以下命令开始调试问题：

DEBUG=typescript-eslint:* ng lint 

您将获得大量输出，但其中可能有一些有价值的信息。

• 检查（在第一行之一）是否tsconfig加载了预期的文件。

• 检查输出中是否有实际上不属于 linting 过程一部分的文件（即来自node_modules文件夹或dist文件夹等）。这可能会暴露一些您必须深入挖掘的配置问题。

另请检查是否获得大量输出，如下所示：

typescript-eslint:typescript-estree:createProjectProgram创建项目程序：path\to\your\file +0ms
typescript-eslint:typescript-estree:createWatchProgram文件不属于任何现有程序，正在创建/更新。path\to\your\file +0ms
typescript-eslint:typescript-estree:createWatchProgram为path\to\your\file +0ms创建监视程序

如果是这种情况，请仔细查看tsconfig. 具体来说是“baseUrl”、“include”和“exclude”路径。

注意： 例如，我有规范文件的“排除”路径，但由于配置问题，它们实际上没有被正确排除，并且单独为这些文件创建项目程序会大大减慢 linting 的速度。

考虑仅将 linting 限制为更改

如果解决上述所有性能问题后仍然无法提供您所希望的性能，您也可以考虑将 linting 限制为仅更改的文件。

这可以通过使用文件中 lint 选项中的“cache”选项来完成angular.json（通常是 eslint 的 --cache 标志）：

"lint": {
  "builder": "@angular-eslint/builder:lint",
  "options": {
    "cache": true,
    ...
  }
}