How To Analyze Angular App Bundle Sizes with webpack Bundle Analyzer or source-map-explorer

Introduction

One of the most important factors to improve the loading performance of a web app is its bundle size. Modern module bundlers like webpack perform tree-shaking to eliminate dead code.

However, in larger apps, tree-shaking may not properly handle some undeeded imports and these will add bloat to the bundle size. Or certain modules may not be lazy loading properly and also add bloat to the main bundle.

In this article, you will be introduced to two tools to analyze your app’s bundle size: webpack-bundle-analyzer and source-map-explorer.

Prerequisites

If you would like to follow along with this article, you will need:

• Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
• This tutorial will also assume you have @angular/cli installed globally

This tutorial was verified with Node v16.2.0, npm v7.18.1, @angular/cli v12.0.5, @angular/core v12.0.5, webpack-bundle-analyzer v4.4.2, and source-map-explorer v2.5.2.

Using 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 install webpack-bundle-analyzer@4.4.2 --save-dev

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

ng build --configuration=production --stats-json

Now, 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 is an example of the result for a sample Angular app:

You can interact with this visualization and select which bundles to display (e.g., main, vendor, chunks).

In package.json, you can optionally create 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 use the following command:

npm run stats

This command will run webpack-bundle-analyzer dist/*/stats.json.

This concludes an introduction to webpack-bundle-analyzer.

Using 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.

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

npm install source-map-explorer@2.5.2 --save-dev

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

ng build --configuration=production --source-map

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:

npx source-map-explorer dist/*/main.*.js

Here is an example of the result for a sample Angular app:

This concludes an introduction to source-map-explorer.

Conclusion

In this article, you were introduced to two tools to analyze your app’s bundle size: webpack-bundle-analyzer and source-map-explorer.

These tools can help you identify all the modules in use by your project and help determine if any are particularly large that can be addressed manually either through customization or replacement with an alternative package.

Continue your learning with using webpack-bundle-analyzer to reduce the bundle size for an application.