Analyzing bundle size

When an Angular application is build for production (ng build –prod), the CLI build creates multiples bundles in the dist folder. Source-map-explorer is a tool to figure out what libraries make the size of these bundles. First it has to be installed:

npm i -g source-map-explorer

Then, a production build can be performed with the sourcemaps flag set to true:

ng build —-prod —-sourcemaps=true

As soon as the build has finished, source-maps can be shown in a web browser as follows:

source-map-explorer bundle-name.js

It will display something like that:

Capture

Werbung