Tutorial

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

Updated on June 22, 2021
author

Alligator.io

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:

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:

  1. 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:

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

Now, run the local webpack-bundle-analyzer against the stats.json file using npx:

  1. 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:

A screenshot of the results for webpack-bundle-analyzer. Modules are represented by differently-sized boxes indicating their file size. Most of the boxes in the main bundle appear to be are related to Angular. Other modules appear to be in a separate chunk.

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:

package.json
"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:

  1. npm run stats

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

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

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:

  1. 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:

  1. 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:

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

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

A screenshot of the results for source-map-explorer. Modules are represented by differently-sized boxes indicating their file size. Most of the boxes in the main bundle appear to be are related to Angular.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel