Esbuild file loader significant slowdown

[SebastianPodgajny]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

Esbuild config:

{
  absWorkingDir: '/Users/user/WebStorm/project',
  bundle: true,
  format: 'esm',
  assetNames: 'media/[name]-[hash]',
  conditions: [ 'es2020', 'es2015', 'module' ],
  resolveExtensions: [ '.ts', '.tsx', '.mjs', '.js' ],
  metafile: true,
  legalComments: 'eof',
  logLevel: 'silent',
  minifyIdentifiers: false,
  minifySyntax: false,
  minifyWhitespace: false,
  pure: [ 'forwardRef' ],
  outdir: '/Users/user/WebStorm/project',
  outExtension: undefined,
  sourcemap: 'external',
  splitting: true,
  chunkNames: '[name]-[hash]',
  tsconfig: '/Users/user/WebStorm/project/apps/project/tsconfig.app.json',
  external: [],
  write: false,
  preserveSymlinks: true,
  define: { ngJitMode: 'false', ngI18nClosureMode: 'false' },
  loader: {},
  footer: undefined,
  platform: 'browser',
  mainFields: [ 'es2020', 'es2015', 'browser', 'module', 'main' ],
  entryNames: '[name]-[hash]',
  entryPoints: {
    main: '/Users/user/WebStorm/project/apps/project/src/main.ts'
  },
  target: [
    'chrome123.0',
    'chrome122.0',
    'edge123.0',
    'edge122.0',
    'firefox124.0',
    'firefox123.0',
    'safari17.4',
    'safari17.3',
    'safari14.1'
  ],
  supported: {
    'async-await': false,
    'object-rest-spread': false,
    'class-field': false,
    'class-static-field': false
  },
  plugins: [
    { name: 'angular-sourcemap-ignorelist', setup: [Function: setup] },
    { name: 'angular-compiler', setup: [AsyncFunction: setup] },
    { name: 'project-esbuild-plugin', setup: [Function: setup] },
    { name: 'angular-external-packages', setup: [Function: setup] }
  ]
}

Build

Application bundle generation complete. [66.045 seconds] (Initial)
Application bundle generation complete. [24.893 seconds]
Application bundle generation complete. [11.307 seconds]
Application bundle generation complete. [10.102 seconds]
Application bundle generation complete. [9.114 seconds]

Adding file loader no code changes, no import of mp4 file

{
  absWorkingDir: '/Users/user/WebStorm/project',
  bundle: true,
  format: 'esm',
  assetNames: 'media/[name]-[hash]',
  conditions: [ 'es2020', 'es2015', 'module' ],
  resolveExtensions: [ '.ts', '.tsx', '.mjs', '.js' ],
  metafile: true,
  legalComments: 'eof',
  logLevel: 'silent',
  minifyIdentifiers: false,
  minifySyntax: false,
  minifyWhitespace: false,
  pure: [ 'forwardRef' ],
  outdir: '/Users/user/WebStorm/project',
  outExtension: undefined,
  sourcemap: 'external',
  splitting: true,
  chunkNames: '[name]-[hash]',
  tsconfig: '/Users/user/WebStorm/project/apps/project/tsconfig.app.json',
  external: [],
  write: false,
  preserveSymlinks: true,
  define: { ngJitMode: 'false', ngI18nClosureMode: 'false' },
  loader: { '.mp4': 'file' },
  footer: undefined,
  platform: 'browser',
  mainFields: [ 'es2020', 'es2015', 'browser', 'module', 'main' ],
  entryNames: '[name]-[hash]',
  entryPoints: {
    main: '/Users/user/WebStorm/project/apps/project/src/main.ts'
  },
  target: [
    'chrome123.0',
    'chrome122.0',
    'edge123.0',
    'edge122.0',
    'firefox124.0',
    'firefox123.0',
    'safari17.4',
    'safari17.3',
    'safari14.1'
  ],
  supported: {
    'async-await': false,
    'object-rest-spread': false,
    'class-field': false,
    'class-static-field': false
  },
  plugins: [
    { name: 'angular-sourcemap-ignorelist', setup: [Function: setup] },
    { name: 'angular-compiler', setup: [AsyncFunction: setup] },
    { name: 'project-esbuild-plugin', setup: [Function: setup] },
    { name: 'angular-external-packages', setup: [Function: setup] }
  ]
}

Build

Application bundle generation complete. [82.725 seconds] (initial)
Application bundle generation complete. [45.292 seconds]
Application bundle generation complete. [30.198 seconds]
Application bundle generation complete. [27.803 seconds]
Application bundle generation complete. [26.910 seconds]

With file loaders rebuild is almost 3x slower

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.0
Node: 20.12.1
Package Manager: yarn 1.21.1
OS: darwin arm64

Angular: 17.3.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, pwa, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.0
@angular-devkit/build-angular   17.3.0
@angular-devkit/build-webpack   0.1703.0
@angular-devkit/core            17.3.0
@angular-devkit/schematics      17.3.0
@ngtools/webpack                17.3.0
@schematics/angular             17.2.0
ng-packagr                      18.0.0-next.3
rxjs                            7.6.0
typescript                      5.4.5
webpack                         5.90.3
zone.js                         0.13.0

Anything else?

No response

[alan-agius4]

Duplicate of #27116

[sod]

If you use yarn 4, you can use yarn patch @angular-devkit/build-angular to apply this #27120 yourself to the cli, to prevent the cli adding the externalPackagesPlugin which is causing the slowdown.

Or remove loader: { '.mp4': 'file' }, from your angular.json and find another way to get the source of mp4 files into your application.

[SebastianPodgajny]

I used npx patch-package to do something similar. It would be great if CLI could support flag that would disable this plugin otherwise this may break any time (I hope it won't be soon 😁). Perf impact on bigger projects is huge IMO "angular-external-packages" takes twice as long as rest of recompilation, in my case also doing nothing.

[clydin]

The next RC (will be out this week) has a perf improvement for cases of only using file type loaders. The team is also evaluating improvements for the other types of loaders but will most likely land in the 18.x timeframe.