We should see an output similar to the image below. This command will build and bundle/compress our application to be ready to deliver to a production server.

To do this, we can use the CLI and run ng build -prod -stats-json. We need to build our application for production. The NG-Pokedex app is a small progressive web app built with the Angular CLI. For this demo we will use the NG-Pokedex app. Angular CLIįirst, we need an app to inspect. In this post we will use the Angular CLI and a few simple commands to get a detailed report about the Angular application bundles we ship to production. For our apps to stay fast, we need to make sure they stayed small (250kb or less is a good goal) and loaded at the appropriate times. Not only are they slower to download but also more time-consuming to evaluate and execute by the browser. Large JavaScript bundles are a surefire way to lose user engagement. But with our web apps becoming ever so increasingly complex how we can know what gets bundled into our apps? How do we track the size of the bundles? We want to make sure we don't send too much JavaScript all at once and slow down our apps. Having a high performing web app is always a top priority.

This post has been updated to use the latest best practices with the Angular CLI which can be found here. We can set a performance budget to warn, or stop the build when assets are larger than a specified size: // module. We can use this tool to spot regressions and see if our changes have caused any difference in size. Bundle Stats Not sponsored! You can surely recreate this behavior if you want to.īundle Stats generates bundle reports and we can use these to compare results between different builds. We can see large chunks as well as any anomalies in the resulting bundle. While I don't enable this tool all the time, I have gotten used to running this every so often. Webpack Bundle Analyzer will help us visualize the output files. Speed Measure Plugin measures your Webpack build speed, its output looks something like this: SMP ⏱ When benchmarking always measure and keep track of progress. Please adjust these examples to suit your needs. I suggest reading the official docs before continuing. I'm going to assume you have a basic understanding of how Webpack works and have a working config. Many of the examples here are echoed in Webpack's documentation so don't skip on reading it! I find them compelling, but most of my projects use Webpack at the moment. I am aware of other tools such as Snowpack, Vite and, Parcel. Webpack is, at the time of writing, the most used bundler.

Webpack stats analyzer