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

And then when loaded in the browser, the downloaded sizes are at least similar

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 build

And then in the browser, my actual loaded sizes are much larger

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?