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

Question

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?

Answer 1

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.

Answer 2

I tested this in my environment:

ng build --prod = main.[hash].js = 792KB.

bg serve --prod = main.[hash].js = 863KB.

$ ng --version
angular-cli: 1.0.0-beta.19-3
node: 7.0.0
os: win32 x64

ng serve generate a cache file slightly smaller, because is temporary.

Update your ng cli and test again.

Answer 3

It's not about which one is better.

It's all about when to use build or serve.

1. build is used for deployment purpose and serve is used for development purpose.
2. build generates compiled output to /dist directory and serve build artifacts from memory for a faster development experience.

Ref : build vs. serve