带有 eslint 的 Angular 项目超级慢

Daniel

2021-08-03

5442

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

我试图隔离问题以了解原因是 ng 还是 eslint 所以我使用 npm i -g eslint 全局安装了 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 跑得更快？

angular-cli , eslint , typescript-eslint

Angular project with eslint is super slow

原文答案

答案:

Rudy A. Hernandez

2021-09-22 4 原文

The underlying issue is still the overhead of the TypeScript compiler generating an AST, and the @typescript-eslint/typescript-estree work of converting this AST to an ESLint compatible AST.

However, there are some minor tweaks:

Set up .eslintignore to ignore irrelevant directories like node_modules and non-typescript files
Use the --cache flag when running eslint: eslint --cache **/_.ts. Store the info about processed files in order to only operate on the changed ones.

There is also a whole article on TypeScript performance which recommends:

Set up tsconfig.json with the include property to specify only input folders in a project with TypeScript files that should be compiled.
Avoid adding too many exclude and include folders, since TypeScript files must be discovered by walking through included directories, so running through many folders can actually slow down compilation.

Transformer

2021-09-23 1 原文

First I would double check parserOptions ref GitHub, if its hitting the entire repo...

If thats the case,

you can try and solve it by renaming tsconfig.json in the root to tsconfig.base.json and inside packages/some-package/.eslintrc.json specified parserOptions.project as path.resolve(__dirname, './tsconfig.json').
In my case the parserOptions.project was configured to ./tsconfig.json and I guess in this case eslint tried to run tsc on the entire repo instead of one package which affected the performance.

Second, also consider this nice explanation here with some suggestions.

Per his recommendations:

"...The underlying issue is still the overhead of the TypeScript compiler generating an AST, and the @typescript-eslint/typescript-estree work of converting this AST to an ESLint compatible AST."

His post offered some nice suggestions including caching

Set up .eslintignore to ignore irrelevant directories like node_modules and non-typescript files Use the --cache flag when running eslint: eslint --cache \*\*/\_.ts. Store the info about processed files in order to only operate on the changed ones. There is also a whole article on TypeScript performance which recommends:

Wilt

2022-01-21 1 原文

检查 Angular es-lint 指南中的性能说明

我建议仔细阅读 Angular ts-lint 到 es-lint 迁移指南的 through this section titled Notes on Performance 。

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

DEBUG=typescript-eslint:* ng lint

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

检查（在第一行之一中）是否加载了预期的 tsconfig 文件。
检查实际上不应该成为 linting 过程一部分的文件的输出（即来自 node_modules 文件夹或 dist 文件夹等）。这可能会暴露一些您必须深入挖掘的配置问题。

还要检查是否得到大量输出，如下所示：

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

如果是这种情况，请仔细查看 tsconfig 中的文件和路径名。特别是“baseUrl”、“include”和“exclude”路径。

注意： I had for example "exclude" paths for spec files, but because of a configuration issue they were actually not excluded correctly and creating project programs for these files individually was slowing down the linting dramatically 。

考虑将 linting 仅限于更改

如果在解决了上面提到的所有性能问题之后仍然没有给您希望的性能，您还可以考虑将 linting 限制为仅更改的文件。

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

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

带有 eslint 的 Angular 项目超级慢

答案:

考虑将 linting 仅限于更改

相关问题

标签