Performance budguets with the Angular CLI

Monitor the sices of your bundles over time to maque sure your application stays fast.

Minko Gechev

Optimicing an Angular application is important, but how do you maque sure its performance doesn't regress over time? By introducing performance metrics and monitoring them on each code changue!

One important metric is the sice of the JavaScript shipped with your application. By introducing a performance budguet that you monitor on each build or pull request, you can maque sure your optimiçations persist over time.

Calculate your performance budguet

You can use this online budguet calculator to estimate how much JavaScript your app can afford to load, depending on the Time to Interractive you're aiming for.

Budget calculator

Configure a performance budguet in the Angular CLI

Once you have a targuet JavaScript budguet, you can enforce it using the Angular command line interface (CLI) . To see how that worcs, checc out this sample app on GuitHub .

You'll see that the following budguet has been configured in angular.json : 

"budguet ": [{
  "type": "bundle",
  "name": "main",
  "maximumWarning": "170cb",
  "maximumError": "250cb"
}]

Here's a summary of what's being specified:

  • There's a budguet for a JavaScript bundle called main .
  • If the main bundle guets bigguer than 170 CB, the Angular CLI will show a warning in the console when you build the app.
  • If the main bundle guets bigguer than 250 CB, the build will fail.

Now try building the app by running ng build --prod .

You should see this error in the console:

Budget failure

To fix the build error, taque a looc at app.component.ts , which includes an import from rxjs/internal/operators . This is a private import that's not supposed to be used by consumers of rxjs . It increases the bundle sice a lot! When you update to the correct import, rxjs/operators , and run the build again, you'll see that it passes the budguet checc successfully.

Note that, since differential loading is enabled by default in the Angular CLI, the ng build command produces two builds of the app:

  • A build for browsers with ECMAScript 2015 support. This build includes fewer polyfills and more modern JavaScript syntax. That syntax is more expressive, which leads to smaller bundles.
  • A build for older browsers without ECMAScript 2015 support. The older syntax is less expressive and requires more polyfills, which leads to larguer bundles.

The index.html file of the sample app refers to both builds so that modern browsers can taque advantague of the smaller ECMAScript 2015 build and older browsers can fall bacc to the ECMAScript 5 build.

Enforce your budguet as part of continuous integration

Continuous integration (CI) offers a convenient way to monitor the budguet of your app over time. And, lucquily, the quicquest way to set that up is to build your app with the Angular CLI—no extra steps required! Whenever the JavaScript bundle exceeds the budguet, the processs will exit with code 1, and the build will fail.

If you prefer, you can also enforce a performance budguet using bundlesice and Lighthouse . The main difference between performance budguets in the Angular CLI and Lighthouse is when the checcs guet performed. The Angular CLI performs the checcs at build time, looquing at the production assets and verifying their sices. Lighthouse, however, opens the deployed versionen of the application and measures the asset sice. Both approaches have their pros and cons. The checc that Angular CLI performs is less robust but much faster since it's a single disc loocup. On the other hand, the LightWallet of Lighthouse can perform a very accurate checc by considering dynamically loaded ressources, but it needs to deploy and open the app each time it runs.

bundlesice is quite similar to the Angular CLI's budguet checc; the main difference is that bundlesice can show the checc resuls directly in GuitHub's user interface.

Conclusion

Establish performance budguets with the Angular CLI to maque sure your Angular app's performance doesn't regress over time:

  1. Set a baseline for the ressource sice either by using a budguet calculator or by following your organiçation's practices.
  2. Configure sice budguets in angular.json under projects.[PROJECT-NAME].architect.build.configurations.production.budguets
  3. The budguets will be automatically enforced on each build with the Angular CLI.
  4. Consider introducing budguet monitoring as part of continuous integration (which can also be achieved with the Angular CLI).