Optimize Angular Build Size | webpack bundle analyzer

Setup Angular Project

# Create a new Angular project
$ ng new DemoProject

Add third party library

$ cd DemoProject
$ npm i devextreme@20.1.7 devextreme-angular@20.1.7 --save

Create prod build

# Generate prod build
$ npm run build

Now its time to setup webpack bundle analyzer

$ npm i webpack-bundle-analyzer -save-dev

Building with stats.json

"scripts": {
"build:stats": "ng build --stats-json"
}
$ npm run build:stats

Bundle Analysis

"scripts": {
"analyze": "webpack-bundle-analyzer dist/DemoProject/stats.json"
}
$ npm run analyze

Lets do this improvement:

Now create prod build again

# Generate prod build
$ npm run build

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store