angularwebpackangular-cliesbuild

Angular - Esbuild chunk sizes do not match build output when served

I recently switched my Angular app to v18 and moved from webpack to esbuild. However, when comparing my chunk sizes with code splitting, I see the sizes do not make sense.

When using webpack, my production build gives webpack production build output

And then when loaded in the browser, the downloaded sizes are at least similarlocalhost download sizes with webpack build

For example, main has raw size of 1.42MB and in browser it shows 1.5MB. Similarly, my lazy loaded profile feature shows 5.81kB raw and in browser loads as 6.4kB. While not identical, they are at least similarly sized.

Now when using esbuild without any changes or customization, I see these chunk sizes for production buildesbuild production build output

And then in the browser, my actual loaded sizes are much largerlocalhost download sizes with esbuild

Build shows main having raw size of 309.90kB and profile feature of 6.40kB but now the downloaded sizes are significantly higher at 1.7MB and 39.2kB respectively. And this goes for every chunk, not just these two.

This is when served locally in a production build. I understand that the estimated transfer size is when everything is gzipped and served in my actually deployment environment. But why are the sizes so much larger locally when building and serving with esbuild vs webpack?

Is this normal, or is there something im not understanding?

Solution

  • By using ng serve, the displayed chunk sizes are not reflecting the actual file sizes of the development server, regardless of the configuration used. This issue has already been reported in the Angular CLI GitHub repository: https://github.com/angular/angular-cli/issues/27645. There the Angular team replied:

    Development servers can perform transformation of code at runtime (typically on request) to support development workflows such as HMR, dependency prebundling, debugging, etc. The downloaded size will not necessarily match the initial built size nor is it intended to do so within the development server. While it is possible to use a production configuration with the development server, the result will still be a development-oriented browser experience.

    When running ng build with the production configuration and opening a simple server which hosts the files, the chunk sizes should be accurate.