Search code examples
angularwebpackminifyangular-cli

Angular CLI - why does <ng serve> bundle better than <ng build>?

Performing a number of Angular CLI commands in order to build the minified basic project:

ng new project
cd project
ng build --prod

... as a result, I get the generated dist folder with a number of bundles. The largest one is called vendor.[hash].js and it's size about 855kB.

However, if I perform ng serve --prod instead:

ng new project
cd project
ng serve --prod

... I can see the loaded by localhost:4200 vendor's bundle weight is about 300kB using Chrome console.

Why is that happens? Is there a way to achieve the second result without ng serve but rather with ng build?

Solution

  • As was discovered through the comments, you simply compared two different values: the size of the non-gzipped file in the file system, and the size of the gzipped download in the browser console.