Angular 18 build with ESBuild generates excessive number of initial chunks after migration from v14

[tryconmanjeet]

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

After migrating my project from Angular v14 to v18, I'm experiencing an issue with the number of initial chunks generated during the build process using the new ESBuild-based application builder.

In Angular v14, the build used to output a small number of initial JavaScript chunks (typically around 3–5). However, after upgrading to Angular v18, the build now produces a large number of small initial chunks. This was not an issue before, and seems to significantly affect performance due to increased number of HTTP requests and potential blocking.

This issue is not related to lazy-loaded modules — these are initial (eager) chunks that should ideally be bundled more efficiently.

Expected Behavior
Angular should produce a smaller number of optimized initial chunks, similar to how it behaved in Angular 14

Minimal Reproduction

1. Start with an Angular 14 project with default configuration.
2. Upgrade to Angular 18 and switch to the ESBuild-based application builder (default in v18).
3. Run ng build in production mode.
4. Observe the number of initial chunks generated.

Exception or Error

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 18.2.19
Node: 22.16.0
Package Manager: npm 10.9.2
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.13
@angular-devkit/build-angular   18.2.19
@angular-devkit/core            14.2.13
@angular-devkit/schematics      18.2.19
@angular/cdk                    18.2.14
@angular/cli                    18.2.19
@angular/google-maps            18.2.14
@angular/material               18.2.14
@schematics/angular             18.2.19
ng-packagr                      18.2.1
rxjs                            7.8.2
typescript                      5.4.5
zone.js                         0.14.10

Anything else relevant?

• Angular version: 18
• CLI builder: @angular-devkit/build-angular using ESBuild
• Target: Production
• Browser builder previously used: Webpack (v14)

There does not seem to be a documented or supported way to merge or reduce these chunks in the ESBuild configuration.
This could impact app performance and scalability, especially on mobile or low-bandwidth networks.

[JoostK]

Duplicate of #27715