externalPackagesPlugin slows down ng serve substantially

[sod]

Command

serve

Is this a regression?

• Kinda, as the externalPackagesPlugin was just added via fix(@angular-devkit/build-angular): allow package file loader option with Vite prebundling #26923

The previous version in which this bug was not present was

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

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

[sod]

As as side note. If you intend to just make the externalPackagesPlugin faster but keep the /^[^./]/ regex, this still would be a regression compared to angular 17.1.0.

E.g. if all that the externalPackagesPlugin did was return null, like:

            build.onResolve({ filter: /^[^./]/ }, async (args) => {
                return null;
            });

Then the watcher in our project would still need 1.4 seconds (instead of the 0.8 seconds in 17.1.0 without this plugin).

I guess having esbuild calling a javascript method on nearly every import doesn't come for free. For us it executes this function 7458 times on every change.

I'd prefer if we could stick to buildOptions.packages = 'external'; without the plugin, as that seemed to work fine. Maybe the options.loaderExtension doesn't need to be part of the bail:

After all, loaderExtension are all build-in esbuild loaders. esbuild doesn't support custom loaders like webpack does. Custom stuff must all be implemented as plugins in esbuild.

[sod]

We still patch angular for this 😅 The createExternalPackagesPlugin() still adds 6 seconds to every single build (slowing down incremental rebuilds from 0.8 seconds to 6.8 seconds)

[alan-agius4]

I tested this with Angular version 19.2, and the timings appear to be quite consistent.

$ ng serve -c=development
Component HMR has been enabled.
If you experience any application reload issues, you can manually reload the page to bypass HMR or disable this feature using the `--no-hmr` command line option.
Please report any issues you encounter here: https://github.com/angular/angular-cli/issues

Initial chunk files | Names         | Raw size
main.js             | main          |  1.63 MB | 
polyfills.js        | polyfills     | 90.20 kB | 
styles.css          | styles        | 95 bytes | 

                    | Initial total |  1.73 MB

Application bundle generation complete. [5.843 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  Press h + enter to show help
Initial chunk files | Names         | Raw size
main.js             | main          |  1.63 MB | 

Application bundle generation complete. [3.968 seconds]

Component update sent to client(s).
Initial chunk files | Names         | Raw size
main.js             | main          |  1.63 MB | 

Application bundle generation complete. [0.624 seconds]

Component update sent to client(s).
Initial chunk files | Names         | Raw size
main.js             | main          |  1.63 MB | 

Application bundle generation complete. [0.577 seconds]

$ ng serve -c=development-slow
Port 4200 is already in use.
Would you like to use a different port? Yes
Component HMR has been enabled.
If you encounter application reload issues, you can manually reload the page to bypass HMR or disable this feature using the `--no-hmr` command line option.
Please report any issues you encounter here: https://github.com/angular/angular-cli/issues

Initial chunk files | Names         | Raw size
main.js             | main          |  1.63 MB | 
polyfills.js        | polyfills     | 90.20 kB | 
styles.css          | styles        | 95 bytes | 

                    | Initial total |  1.73 MB

Application bundle generation complete. [5.877 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:45767/
  ➜  Press h + enter to show help
Initial chunk files | Names         | Raw size
main.js             | main          |  1.63 MB | 

Application bundle generation complete. [4.055 seconds]

Component update sent to client(s).
Initial chunk files | Names         | Raw size
main.js             | main          |  1.63 MB | 

Application bundle generation complete. [0.625 seconds]

Component update sent to client(s).
Initial chunk files | Names         | Raw size
main.js             | main          |  1.63 MB | 

Application bundle generation complete. [0.583 seconds]

[sod]

Thx for checking! 🙏

The slowness is still there as the problematic plugin (createExternalPackagesPlugin()) is still there. But the conditions when this plugin activates changed via #27642 (which prevents the plugin from being loaded if all loaders are of type file), so my reproduction didn't include that plugin anymore when you update from 17 to 19.

I now made this angular.json change:

            "development": {
            },
            "development-slow": {
              "loader": {
+               ".inline.svg": "text",    // <- text will load createExternalPackagesPlugin
                ".webp": "file"           // <- file alone wouldn't load createExternalPackagesPlugin
              }
            },

In our project, vite and build work fine without createExternalPackagesPlugin (with both, text and file loaders), as I monkeypatch that plugin out on every angular update :)

[sod]

I now pushed a commit with working assets for "loader": {"*.svg": "file", "*.inline.svg": "text"} and updated to angular 19: https://github.com/sod/ng-serve-external-deps-slowdown

And you'll see that both serve:ng serve -c=development-slow and build:ng build -c=development-slow work.

I guess the trick why we don't need the createExternalPackagesPlugin is, that all our assets are referenced in folders that exist tsconfig.json paths mapping

    "paths": {
      "src/assets/*": ["./src/assets/*"],
    }

This is the commit sod/ng-serve-external-deps-slowdown@608ffbc that adds the working assets to the reproduction