I am trying the new Angular CLI esbuild builder, and it outputs hundreds of chunks, some of them only a few bytes long. The older webpack-based builder, with commonChunk flag set to false, just emits about 30 files.
I don’t see the benefits of having so many small files, even using HTTP/2 to serve them, and I would rather have fewer and more predictable chunks than hundreds of them.
There are some open issues in the esbuild repo (#207, #1128) regarding this behavior, but for now, it is not configurable and there is no solution ready anytime soon. Angular devs are also concerned with this: #26307, #27321.
To solve this, I have tried to concatenate the esbuild output using tools like Rollup or Webpack. Here is what I am trying to achieve:
- Provide the bundler the main entrypoint from esbuild output.
- The bundler will read all ES imports and concatenate them into a single file.
- The found dynamic
imports()will generate a new bundle with their content, also concatenating all ES imports within them.
However, I haven’t been able to configure any bundler to replicate this behavior and have a output similar to the Webpack-based Angular Builder.
Any help? Thanks!