[Angular 8] Calculate and Measure Performance budgets with the Angular CLI

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.

 

In angular.json:

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "bundle",
                  "name": "main",
                  "maximumWarning": "350kb",
                  "maximumError": "500kb"
                }
              ]
            }
          }
        },