Why does Angular 18 (ESBuild) generate so many initial chunks after migrating from Angular 14?

I recently migrated my project from Angular 14 to Angular 18, and I’m noticing a huge increase in the number of initial chunks generated during the production build using ESBuild.

In Angular 14 (with Webpack), the build typically produced 3–5 initial JS bundles. But now, Angular 18 generates dozens of small initial chunks, even though I haven’t significantly changed the app structure or added lazy-loaded modules.

This raises concerns about:

• Browser performance, since too many HTTP requests can delay loading.
• The lack of control over how these chunks are split.
• No apparent way to reduce or merge these chunks using configuration.

Questions:

• Is this expected behavior in Angular 18 with ESBuild?
• Is there any way to reduce or control the number of initial chunks?
• Can I customize the chunking strategy like we used to with Webpack?

Additional Info:

Angular version: 18.x

Builder: ESBuild (default in Angular 18)

Total JS size is similar, but split across many files



Continue reading...