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
.
If you would like to follow along with this article, you will need:
@angular/cli
installed globallyThis 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.
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
.
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
.
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
.
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.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.