Angular with ESBuild produces massive number of tiny chunks

[mihailik]

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

15

Description

Angular build produces hundreds of tiny chunks, totally amounting to less than 20Mb of JS.

It used to produce about the same size JS, with 4-6 chunks depending on settings.

There doesn't seem to exist a built-in way to fix the 'chunk explosion' either in the config, in the built-in Angular tools, or any known way to extend Angular to fix it on our side.

Minimal Reproduction

We are using Angular to build a small-to-moderate sized app that is then deployed into several environments, including being hosted by large Apache instance, by nginx in a cloud host and some other setups for beta-testing.

Some web hosts support newer HTTP protocols, others don't.

Some proxy paths between web hosts and end-point browsers handle newer HTTP traffic in better ways, other less so.

Both deployment processes and user experience is severely harmed by this 'explosion' of build artifacts.

A. User Experience

1. for shared hosts unable to switch on new HTTP, the user experience is slow choppy
2. for host <--> endpoint browsers that pass through legacy HTTP proxies, the user experience is slow and choppy
3. for mobile clients with intermittent connectivity, there are multiple points of failure in downloading application code, creating cases extremely hard to debug when 234 tiny files loaded fine, but 2 silently failed

B. Deployment process

1. Having to deploy and account for multiple files slows down some forms of deployment quite significantly. In one case we use remote distributed filesystem, where change from 5 files to hundreds means standard rsync command turns from 3-4 minutes to 30-40 minutes
2. Partial deployment failures are hard to spot. With 3-4 files you can see incomplete deployment vividly when you inspect the target directory; with hundreds there is no practical way to see if all files are deployed.
3. Partial deployment failures may pass sanity test and only show in PROD after user stumbles upon edge case. In unlucky case, the chunk that's failed to deploy may not be part of core functionality, and only be noticed as missing long time after.
4. Partial deployment failures are harder to cleanup. Deleting hundreds of files take 100x times longer than deleting a couple of them.

All in all, dealing with hundreds of build artifacts instead of handful increases operational costs and operational risks proportionally.

If we can get a path forward within Angular+ESBuild pipeline, even building necessary extension ourselves — that would be much appreciated.

Exception or Error

Friction and risks of partial failure during development lifecycle

Your Environment

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

Angular CLI: 17.1.0
Node: 20.11.1
Package Manager: npm 10.2.4
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1701.0
@angular-devkit/build-angular   17.3.0
@angular-devkit/core            17.3.0
@angular-devkit/schematics      17.1.0
@angular/cdk                    17.1.2
@angular/material               17.0.4
@schematics/angular             17.1.0
rxjs                            7.8.1
typescript                      5.3.3
webpack                         5.90.3
zone.js                         0.14.3

Anything else relevant?

We are using ESBuild with React in other projects within the same department, and never had any problems with chunks.

ESBuild itself can absolutely bundle code without generation of hundreds of tiny files.

The bug is not with ESBuild, but with however Angular is using ESBuild.

[mihailik]

Just spotted one very telling piece of the puzzle with this bug.

We are using Dexie library for caching data into indexedDB. We did not indicate anywhere we want that module extracted into a chunk, neither in config nor in importing coding patterns.

But you can see Angular decided to split that quite tidy small piece of code into a separate chunk, for no reason whatsoever.

Does it help for a page to have hundreds of HTTP requests?
Does it help performance?
Does it improve Development process?
Does it have any upside to anyone?

[JeanMeche]

It looks like you already stumbled upon the original issue #26307

[JoostK]

From the screenshots, it looks like this is serving devmode? The would be the effect of Vite's pre bundling, which can be disabled by setting "prebundle": false for the serve target.

[alan-agius4]

This id a key functionality of Vite, contributing significantly to its exceptional speed, especially noticeable during the development phase when utilizing ng serve. During ng build fewer chunks will be generated.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}