Why Estimated Transfer Size does not reflect while loading the bundle in the the browser with Angular build?

Question

I see "Raw Size" and "Estimated Transfer Size" while generating the bundle with Angular build.

But when I load the site in browser, the chrome dev tools shows main.js file is loading with raw size?

Am I missing something? Is there a way to receive the file with size indicated with "Estimated Transfer Size"?

Answer 1

The Estimated Transfer Size is a somewhat new feature of Angular. It's estimating what the actual transfer size your bundle will be once it it gzipped.

The Angular CLI doesn't do g-zipping out of the box. Your CDN will likely take care of it without your knowledge. If instead, you're serving up your angular application with your own server, and not making use of a CDN, you will want to set up g-zipping.

In short, the Estimated transfer size is a pretty good guess of what your actual users of your production application will need to download for that bundle.