Creating unnecessary excessive chunks

先在連結的 ng-esbuild-demo 重現專案中執行 build，並比較此處描述的初始 chunk 與 lazy chunk 清單。閱讀連結的 esbuild 程式碼分割架構區段，接著追蹤 Angular CLI 的建置整合，以找出靜態要求的共用模組變成個別初始 chunk 的位置。完成的條件是，必要的共用程式碼不再產生不必要的初始請求，同時不將未使用的程式碼帶入初始 bundle。

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Disclaimer

This is not really a bug, as even if it worked differently with webpack, for esbuild this is normal. However, since the default bundler is now esbuild some would consider this a regression.

Required chunks references in dynamic imported code get split in to separate chunks

When splitting code, esbuild does not seems to properly take into account what is already statically imported (thus "required") and does not need to be split into a separate chunk.

To illustrate this lets consider an example where we have the following 5 standalone components:

• AppComponent (The root component which is not lazy loaded)
• Feature1Component (A feature component lazy loaded via a dynamic import in the router)
• Feature21Component (A feature component lazy loaded via a dynamic import in the router)
• Ui1Component (A UI component imported statically, like a button)
• Ui2Component (A UI component imported statically, like a button)

Chunks without Shared Components

If the AppComponent has a RouterOutlet which has separate paths Feature1Component and Feature21Component it will generate a chunk for the code shared between these components (lets call it Common Chunk).

In this case the build output is:

Initial chunk files	Names
chunk-YIKH6UD4.js	- ("common")
main-V6UA4PHT.js	main

Lazy chunk files	Names
feature-1.component-AQEBZKLJ.js	feature-1-component
feature-2.component-EH7EGWEP.js	feature-2-component

And if Feature1Component imports Ui1Component and Feature21Component imports Ui2Component then code from Ui1Component will be bundle in Feature1Component and the code from Ui2Component will be bundle in Feature2Component.

Chunks with Shared Components

However, if the AppComponent also imports Ui1Component and Ui2Component this code is now shared and will be split into separate chunks.

Thus the build output will now be:

Initial chunk files	Names
chunk-YIKH6UD4.js	- ("common")
main-V6UA4PHT.js	main
chunk-WKA4CZR7.js	- ("ui-1-component")
chunk-XCJUHD2B.js	- ("ui-2-component")

Lazy chunk files	Names
feature-1.component-AQEBZKLJ.js	feature-1-component
feature-2.component-EH7EGWEP.js	feature-2-component

The issue is that Ui1Component and Ui2Component are now statically imported in the AppComponent, and therefore belong in this common chunk. These chunks are statically imported in the "common" chunk and required for the application to bootstrap but are downloaded separately.

As they are always downloaded, splitting them does not seems to have a benefit, when Feature1Component or Feature2Component imports them, the request is cached and it should not make a difference if it over imports.

However, splitting them does have a downside, it increases the load time. Even tho in this example the consequences of a couple of extra chunks is meaningless in larger apps the consequence is very real.

If the application produces 100 or 200 initial chunks this will have a significant impact on the initial load time and LCP.

Even tho the a modern browser using http3 or http2 uses multiplexing it will still have an significant overhead downloading so many small chunks. We are currently calling this the chunk gap:

Additionally this issue will have a larger impact on older and slower devices.

• HTTP2 Support
• HTTP3 Support

Additional example of performance impact:

• https://github.com/angular/angular-cli/issues/27321

Avoiding Code Splitting Shared Code

It seems possible to avoid additional chunking in some cases by using barrel files.

For example if we create a barrel file that exports both Ui1Component and Ui2Component and only import them via that barrel file we are able to force esbuild to place the shared code into the "common" chunk.

So using:

// ./ui/index.ts

export * from './ui-1.component';
export * from './ui-2.component';

The build output will now be:

Initial chunk files	Names
chunk-YIKH6UD4.js	- ("common")
main-V6UA4PHT.js	main

Lazy chunk files	Names
feature-1.component-AQEBZKLJ.js	feature-1-component
feature-2.component-EH7EGWEP.js	feature-2-component

Note

In esbuild architecture documentation it explains that:

code splitting is implemented as an advanced form of tree shaking.

This means that doing so will partially optout of tree shaking.

For example if we add a Ui3Component and a Feature3Component.

And we add the Ui3Component to the barrel file:

// ./ui/index.ts

export * from './ui-1.component';
export * from './ui-2.component';
export * from './ui-3.component';

If the Ui3Component is never imported anywhere it will not increase the initial bundle.

However, if we reference the Ui3Component in Feature3Component (loading the Feature3Component in a lazy route), this will increase the initial bundle even if Ui3Component is not used in the AppComponent.

Minimal Reproduction

https://github.com/ChristopherPHolder/ng-esbuild-demo

Exception or Error

Shared Code Required in a root component or a root node of the node graph is bundle together.

Your Environment

Angular CLI: 17.3.5        
Node: 20.11.1              
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 17.3.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.5
@angular-devkit/build-angular   17.3.5
@angular-devkit/core            17.3.5
@angular-devkit/schematics      17.3.5
@schematics/angular             17.3.5
ng-packagr                      17.3.0
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.4

Anything else relevant?

No response