angular / angular/angular-cli

`externalPackagesPlugin` slows down `ng serve` substantially

Abierto
#27,116 5 comentarios 0 reacciones 1 asignado Reclamado por @clydin Ver en GitHub
angular/build:application angular/build:dev-server area: @angular/build freq1: low needs: more info severity4: memory/performance type: bug/fix
Lenguaje dominante
TypeScript
Estrellas
27k
Forks
11.8k
Merge medio
14 h 23 min
PR fusionados (30 d)
162

Descripción

### Command

serve

### Is this a regression?

- [x] Kinda, as the `externalPackagesPlugin` was just added via https://github.com/angular/angular-cli/pull/26923

### The previous version in which this bug was not present was

Before https://github.com/angular/angular-cli/pull/26923 existed, which was part of [17.1.1](https://github.com/angular/angular-cli/releases/tag/17.1.1), so I guess angular [17.1.0](https://github.com/angular/angular-cli/releases/tag/17.1.0)

### Description

angular 17.2.0
vite/esbuild powered application builder

Using the `loader` option in `angular.json` like:

```json
"loader": { ".webp": "file", ".svg": "text" },
```

to support images as ecmascript imports or svgs as inline. This causes angular-cli to add the `externalPackagesPlugin` which is a giant hit on build performance. For our apps:

| angular version | watch rebuild time | note |
| -- | -- | -- |
| angular 17.1.0 `{ "loader": { ".webp": "file" } }` | `0.8 seconds` |
| ~angular 17.1.1 `{ "loader": { ".webp": "file" } }`~ | `6.0 seconds` |
| ~angular 17.2.0 `{ "loader": { ".webp": "file" } }`~ | `6.0 seconds` |
| angular 19.2.1 `{ "loader": { ".webp": "file" } }` | `0.8 seconds` | <- `file` doesn't regress anymore |
| angular 19.2.1 `{ "loader": { ".svg": "text" } }` | `6.0 seconds` | <- `text` still does |

Those additional 5.2 seconds are also added to the initial build.

My rough idea of the issue is, that the `externalPackagesPlugin` looks at every single import that doesn't start with `.` or `/` and doesn't cache the results. So tons of `@angular/...`, `rxjs`, `@ngrx/...` and similar imports are resolved over and over again. Even if this function only needs 2ms to run, this quickly adds up.

### Minimal Reproduction

https://github.com/sod/ng-serve-external-deps-slowdown
![image](https://github.com/angular/angular-cli/assets/905328/88202539-c585-4240-b0b3-98154559cc73)

The only difference between the `development` and `development-slow` configurations in the angular.json are:

```json
"development": {
},
"development-slow": {
"loader": {
".svg": "text"
}
},
```

### Your Environment

```text
@angular-devkit/architect 0.1702.0
@angular-devkit/build-angular 17.2.0
@angular-devkit/core 17.2.0
@angular-devkit/schematics 17.2.0
@angular/cli 17.2.0
@schematics/angular 17.2.0
rxjs 7.8.1
typescript 5.3.3
zone.js 0.14.4
```

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.