Angular Stats - ng build Vs ng build --prod

In this blog, we are going to explore the Angular application stats that will help us understand the usage of ng build options.

In this blog, we are going to explore the Angular application stats, which will help us understand the usage of ng build options.

 

Let's start with a sample application.

 

Here I'm going to use the same project, which I've used in my previous blogs. You can use any app you like. We're going to install webpack-bundle-analyzer.

 

Install the below package to check the Angular stats.

npm install webpack-bundle-analyzer --save-dev

Now, let us run the build command with --stats-json. It will create a json file in dist folder.

ng build --stats-json

Once the file is created, execute the below command to generate a visual representation of all .js bundle packages.

npx webpack-bundle-analyzer dist/angular7Demo/stats.json

It will popup a new window with all packages like this:

 

 

 

Check out the "Show chunks" area of files in the left side created by the ng build option and see the bundle size.

 

 

 

You can check that each js file below is a main.js where you can see all components and their usages.

 

Now, let us build with --prod option. Run this command. 

ng build --prod --stats-json

 

 

 

Check the results using Angular stats. You will see the results as something like this:

As you can see from the above file, --prod file size is much smaller.

 

Let's see the differences between ng build vs ng build --prod in the following table:

 

ng build	ng build --prod
environment.ts - will be used	environment.prod.ts
source map will be generated	source map will not generate
No Uglification	Uglification
No Tree shaking	Tree shaking
No AOT	AOT Enabled
No Bundling	Bundling

 

I hope it helps!