Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

`externalPackagesPlugin` slows down `ng serve` substantially

未关闭
#27,116 5 条评论 0 个 reaction 已指派 1 人 在 GitHub 查看

@clydin 已经在做这个了。

开始于 2025年7月7日。

评估

这个 Issue 还没有评估数据。

描述

angular/build:application angular/build:dev-server area: @angular/build freq1: low needs: more info severity4: memory/performance type: bug/fix
Command

serve

Is this a regression?
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, so I guess angular 17.1.0

Description

angular 17.2.0
vite/esbuild powered application builder

Using the loader option in angular.json like:

"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

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

            "development": {
            },
            "development-slow": {
              "loader": {
                ".svg": "text"
              }
            },
Your Environment
@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
主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
16 小时 35 分钟
30 天内合并 PR
176

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

angular/angular-cli 的其他 Issue

查看 angular/angular-cli 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。