angular-cli icon indicating copy to clipboard operation
angular-cli copied to clipboard

ng serve confusing raw size?

Open ScriptType opened this issue 9 months ago • 5 comments

Command

serve

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

No response

Description

I just saw that ng serve raw size seems to be wrong? In the past, I at least thought they were correct.(When we still used webpack) Bildschirmfoto 2024-05-15 um 18 04 47 We see a raw size of 20.22 KB for the main bundle and 33.24 KB for the polyfills. Let's see what the browser says. Bildschirmfoto 2024-05-15 um 18 06 09 Not even close.

Then I thought, okay, maybe these are estimates for when I eventually build the project. So let's build the project.

Bildschirmfoto 2024-05-15 um 18 07 57

The main bundle is now 193 KB, but this time at least the 193 KB is correct. Interestingly, the polyfills have the exact same size in ng serve --configuration production as in ng build, at least in the console, but not in the browser.

Am i missing something? Am I not reading the numbers correct do they mean something different? They are atleast confusing i would say.

Also just standard ng serve numbers are also not the same as in the browser?

EDIT: Ok looks like vite is adding allways the sourcemaps inline in serve without it its 20.22kb, And the main size is smaller in serve than in build because of the cached data created.

I was pretty confused by it and i can imagine many others are also confused by it especially the behavior atleast to my memory changed compared to webpack.

Would it maybe be possible to aknowledge all files in the console?

Minimal Reproduction

ng new testSize cd testSize ng serve --configuration production

Exception or Error

No response

Your Environment

Angular CLI: 17.3.7
Node: 20.12.2
Package Manager: npm 10.5.0
OS: darwin arm64

Angular: 17.3.8
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.7
@angular-devkit/build-angular   17.3.7
@angular-devkit/core            17.3.7
@angular-devkit/schematics      17.3.7
@angular/cli                    17.3.7
@schematics/angular             17.3.7
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.5

Anything else relevant?

It´s an behavior of showing the raw size in the console for ng serve completly different when compared to webpack. Webpack shows for example 318.85kb for the main.js and the browser loads exactly 318.85kb its intuitive and predictable,

If we compare it to the current esbuilder/vite solution which adds sourcemaps (Not Angulars fault) and uses the cache on the file system and than shows 20.22kb which is literally impossible and absolutely unintuitive. It would even be better to show no number at this point as it literally can't be evaluated for anything and only will bring confusion to anyone when they compare ng serve with ng build and the ng serve looks smaller in the cli log

No response

ScriptType avatar May 15 '24 16:05 ScriptType