angular / angular/angular-cli

`externalPackagesPlugin` slows down `ng serve` substantially

Đang mở
#27,116 5 bình luận 0 reaction 1 người được giao Được @clydin nhận Xem trên GitHub
angular/build:application angular/build:dev-server area: @angular/build freq1: low needs: more info severity4: memory/performance type: bug/fix
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### 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
```

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.