title: Why is the Angular 7 framework extremely slow on a low-CPU device (Windows 10, 2GB RAM, 1GHz CPU) in Google Chrome?
body: <p>I have created a simple project in which I have installed <a href="https://getbootstrap.com/docs/4.0/getting-started/download/" rel="noreferrer">Bootstrap 4</a>. But it seems it's taking 8-10 seconds to load the page and CPU usage is 100%.
  <a href="https://i.stack.imgur.com/IGaye.png" rel="noreferrer">This is the configuration of my desktop on which CPU usage is high.</a></p>
  
  <p>I am running the project through AOT which ng serves --aot. While testing on a low-CPU Desktop it's taking 20-30 seconds to load the page. So is this how Angular works or can we improve it and make it load within a second on a low-CPU desktop with <a href="https://i.stack.imgur.com/D2Jvs.png" rel="noreferrer">this configuration</a>?</p>
  
  <p><a href="https://i.stack.imgur.com/yZkNN.png" rel="noreferrer">This is a screenshot of the load timing of Angular on the low-CPU desktop.</a></p>
  
  <p>The scripting part is taking 6-7 seconds to load the page even after using AOT. which seems a lot. </p>
  
  <p><a href="https://i.stack.imgur.com/iu1JK.png" rel="noreferrer">Screenshot of the performance of my desktop machine with 8 GB RAM.</a></p>
  
  <p>Due to this high CPU usage it's taking a long time on the low-CPU device to load the page.</p>
  
  <p>Below is my Angular JSON file:</p>
  
  <pre><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "testapp": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
              "outputPath": "dist/testapp",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.app.json",
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
                "src/styles.css",
                "node_modules/bootstrap/dist/css/bootstrap.min.css"
              ],
              "scripts": [
                "node_modules/bootstrap/dist/js/bootstrap.min.js"
              ]
            },
            "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": "initial",
                    "maximumWarning": "2mb",
                    "maximumError": "5mb"
                  }
                ]
              }
            }
          },
          "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
              "browserTarget": "testapp:build"
            },
            "configurations": {
              "production": {
                "browserTarget": "testapp:build:production"
              }
            }
          },
          "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
              "browserTarget": "testapp:build"
            }
          },
          "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
              "main": "src/test.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.spec.json",
              "karmaConfig": "src/karma.conf.js",
              "styles": [
                "src/styles.css"
              ],
              "scripts": [],
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ]
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
              ],
              "exclude": [
                "**/node_modules/**"
              ]
            }
          }
        }
      },
      "testapp-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "prefix": "",
        "architect": {
          "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
              "protractorConfig": "e2e/protractor.conf.js",
              "devServerTarget": "testapp:serve"
            },
            "configurations": {
              "production": {
                "devServerTarget": "testapp:serve:production"
              }
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": "e2e/tsconfig.e2e.json",
              "exclude": [
                "**/node_modules/**"
              ]
            }
          }
        }
      }
    },
    "defaultProject": "testapp"
  }
  </code></pre>
  
  <p>Below is my package JSON file:</p>
  
  <pre><code>{
    "name": "testapp",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "~7.1.0",
      "@angular/common": "~7.1.0",
      "@angular/compiler": "~7.1.0",
      "@angular/core": "~7.1.0",
      "@angular/forms": "~7.1.0",
      "@angular/platform-browser": "~7.1.0",
      "@angular/platform-browser-dynamic": "~7.1.0",
      "@angular/router": "~7.1.0",
      "bootstrap": "^4.1.3",
      "core-js": "^2.5.4",
      "rxjs": "~6.3.3",
      "tslib": "^1.9.0",
      "zone.js": "~0.8.26"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.11.0",
      "@angular/cli": "~7.1.1",
      "@angular/compiler-cli": "~7.1.0",
      "@angular/language-service": "~7.1.0",
      "@types/node": "~8.9.4",
      "@types/jasmine": "~2.8.8",
      "@types/jasminewd2": "~2.0.3",
      "codelyzer": "~4.5.0",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~3.1.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~1.1.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.4.0",
      "ts-node": "~7.0.0",
      "tslint": "~5.11.0",
      "typescript": "~3.1.6"
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/XCSVr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XCSVr.png" alt="this is command for servving using npm screenshot"></a></p>
  
  <p><a href="https://i.stack.imgur.com/vpKiK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vpKiK.png" alt="this is my angular version screenshot"></a></p>
  
  <p><a href="https://i.stack.imgur.com/fsR7E.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fsR7E.png" alt="performance summary of the call tree details"></a>
  <a href="https://i.stack.imgur.com/vpNRG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vpNRG.png" alt="performance Bottomup of call tree"></a>
  <a href="https://i.stack.imgur.com/a1jBv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/a1jBv.png" alt="performance call tree"></a></p>