title: 'Angular Performance: Performance budgets with the Angular CLI' canonical_url: 'https://juristr.com/blog/2019/08/ngperf-setting-performance-budgets' published: true description: Learn how to set performance budgets using the Angular CLI cover_image: 'https://juristr.com/blog/assets/imgs/ngperf/ngperf-cli-budgets.jpg' tags: - angular - performance - javascript - videos

This post has originally been published on https://juristr.com/blog/2019/08/ngperf-setting-performance-budgets. Go to juristr.com/blog for more content

This article is part of my "Angular Performance Week" series, where I publish a new video each day based on the performance articles on web.dev/angular. This article focuses on how we can define performance budgets with the Angular CLI.

Note: this article and attached Egghead video lesson are based on the articles on web.dev/angular by Minko Gechev and Stephen Fluin. Full credit goes to them :thumbsup:

Angular Performance Series

  1. Route Level Code Splitting
  2. Preload Lazy Routes in Angular
  3. Performance budgets with the Angular CLI
  4. Optimize Angular's Change Detection
  5. Virtual Scrolling for large lists with the CDK
  6. Precaching with the Angular Service Worker

Don't miss the other videos by subscribing to my newsletter.

Configuring Performance Budgets

Measuring is extremely important, without numbers we don’t know about potential problems and we don’t have a base we can improve upon. Performance Budgets are a way to impose limits on metrics that may affect our app’s performance. In this lesson we’ll learn how to configure the Angular CLI to configure performance budgets, to monitor them and to alert us when we violate them.

{%youtube xcV813dYEb0%}

Original web.dev article

Wanna read the original web.dev article? Check it out here!.