Using webpack Bundle Analyzer or source-map-explorer to Analyze an Angular App’s Bundle Size

One of the most important factors to improve the loading performance of a web app is its bundle size. Thankfully, modern module bundlers like webpack do a really good job at dead-code elimination via tree shaking. Still however, chances are good that in a larger app some unneeded imports won’t be properly tree shaken and unnecessary code will be bundled with the app. Or perhaps you’ll discover that certain modules are not being lazy loaded properly and still being included in the main bundle.

Here we’ll go over how to use two tools to easily analyze your app’s bundle size: webpack bundle analyzer and source-map-explorer.

webpack bundle analyzer

webpack bundle analyzer is a tool that analyzes a webpack stats JSON file that the Angular CLI can generate automatically upon building the app.

First, you’ll want to install webpack-bundle-analyzer in your project as a dev dependency:

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

# or, using Yarn:
$ yard add webpack-bundle-analyzer --dev

Then, simply build your app for production using the Angular CLI and specify the --stats-json so that the webpack stats data gets exported too in the dist folder:

$ ng build --prod --stats-json

Now, all that’s left to do is to run the local webpack-bundle-analyzer against the stats.json file using npx:

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

This will start a local server on port 8888 with an interactive FoamTree map of your production app bundle. Here for example is the generated bundle map of this Angular 5 example app:

Bundle size map example

From a side menu, you can select which bundles to display (e.g.: main, vendor, chunks…)


To make things even easier, you can add a new npm script that calls webpack-bundle-analyzer:

"scripts": {
  "stats": "webpack-bundle-analyzer dist/stats.json",
  ...
},

And now, whenever you want to access the stats on a production build, you can simply run:

$ npm run stats

npm scripts look first in the local node_modules folder, so there's no need to use npx here.

source-map-explorer

source-map-explorer is a tool that uses a bundle’s generated source map files to analyze the size and composition of a bundler and render a visualization of the bundle similar to what webpack bundle analyzer does.

To get started, first install the package in your project as a dev dependency:

$ npm i source-map-explorer --save-dev

# or, using Yarn:
$ yard add source-map-explorer --dev

Then you’ll want to build your app for production and use the --sourcemaps flag so that source map files get generated for each JavaScript bundle:

$ ng build --prod --sourcemaps

After this, you can generate and launch the visualization by pointing at one of the JavaScript files from your bundle. For example, if we can to have a look at the main bundle it would look something like this (the hash will vary):

$ npx source-map-explorer dist/main.f3be1bf742c2a16b21d5.bundle.js

And here’s an example of what we get in the browser:

source-map-explorer example

📊 Now that you know how to use these tools, you can start having fun at making your apps leaner and lazy loading as much code as possible.

  Tweet It
✖ Clear

🕵 Search Results

🔎 Searching...