webentwicklung-frage-antwort-db.com.de

Warum ist das Angular 7 Framework auf einem Gerät mit niedriger CPU-Auslastung (Windows 10, 2 GB RAM, 1 GHz CPU) in Google Chrome extrem langsam?

Ich habe ein einfaches Projekt erstellt, in dem ich Bootstrap 4 installiert habe. Das Laden der Seite dauert jedoch anscheinend 8-10 Sekunden, und die CPU-Auslastung beträgt 100%. Dies ist die Konfiguration meines Desktops, auf dem die CPU-Auslastung hoch ist.

Ich leite das Projekt über AOT, das ng - aot dient. Beim Testen auf einem Desktop mit niedriger CPU-Auslastung dauert das Laden der Seite 20 bis 30 Sekunden. So funktioniert Angular) oder können wir es verbessern und es mit diese Konfiguration innerhalb einer Sekunde auf einem Desktop mit niedriger CPU laden lassen?

Dies ist ein Screenshot des Ladezeitpunkts von Angular auf dem Desktop mit niedriger CPU.

Der Scripting-Teil benötigt 6-7 Sekunden, um die Seite auch nach der Verwendung von AOT zu laden. das scheint viel.

Screenshot der Leistung meines Desktop-Rechners mit 8 GB RAM.

Aufgrund dieser hohen CPU-Auslastung dauert das Laden der Seite auf dem Gerät mit niedriger CPU-Auslastung sehr lange.

Unten ist meine Angular JSON-Datei:

{
  "$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"
}

Unten ist meine Paket-JSON-Datei:

{
  "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"
  }
}

this is command for servving using npm screenshot

this is my angular version screenshot

performance summary of the call tree detailsperformance Bottomup of call treeperformance call tree

Ich muss mich fragen, wie viele Ressourcen in dieser Hardwarekonfiguration verbleiben, um sich auf die Ausführung der Dateien hier zu konzentrieren. Wenn auf diesem Computer Win10 32-Bit ausgeführt wird, ist immer noch Platz, aber wenn es 64-Bit ist, sind Sie auf dem absolut empfohlenen Minimum um das Betriebssystem auszuführen. Darüber hinaus haben Sie Chrome und möglicherweise IDE= wenn das offen ist, gelten beide als "sperrig" für diese Hardware. Eine letzte Erwähnung ist der dev server, der mit npm läuft, startet - also gibt es eine Menge Dinge, die das System ziemlich schnell voll machen. Die verbleibende CPU und RAM kann nur so viel genutzt werden (I Stellen Sie sich mehr Blocking vor und GC muss passieren).

Wenn Sie Ihre (erweiterte) Windows-Ressourcennutzung anstelle von nur Chrome freigegeben haben, könnte dies ein wenig mehr helfen.

Möglichkeiten zum Testen der "Produktions" -Version des Builds: Führen Sie ng build --prod Aus, wie bereits von anderen erwähnt. Dadurch werden die Quellkarten nicht generiert und es sollten alle Optimierungen für eine rundum effiziente Erstellung vorhanden sein. Führen Sie npm i -g http-serverHTTP Server aus, damit Sie die statischen Ressourcen leicht lokal bereitstellen können. Führen Sie http-server ./dist/testapp -g Nav zu einer der URLs aus, auf die es verweist

Das -g soll Anfragen gzipen, die davon profitieren können, aber möglicherweise nicht, wenn sie nicht groß genug sind (jemand anderes weiß vielleicht mehr darüber) Dies).

Hier bekomme ich vielleicht ein bisschen Wärme, aber ich persönlich mag bootstrap in Angular nicht, teilweise wegen der Implementierung. Ich fühle mich wie Angular Material ist nur dafür gemacht;) Wenn Sie bs verwenden müssen (ich muss bei der Arbeit sein), verwenden Sie stattdessen ng-bootstrap , aber es gibt andere Optionen, die ich unglaublich gut im Ökosystem finde.

Was die CPU-Auslastung im Leerlauf betrifft, so habe ich 0,1% CPU-Auslastung für die Registerkarte Angular application. Wenn Ereignisse in der Anwendung auftreten (wie das Bewegen der Maus über die Anwendung und dergleichen), wird dies der Fall sein Starten Sie das Auslösen von Änderungserkennungszyklen, die eine Menge CPU-Ressourcen verbrauchen, aber das meiste davon wird durch Befolgen einer Art Containerkomponente -> Präsentationskomponentenmodell (wobei Präsentationskomponenten auf Push sind) gelöst Anwendungen unterschiedlicher Größe, von Kleinunternehmen bis hin zu Unternehmen. In den meisten Fällen funktioniert dieses Modell dank Vorlagen/Outlets und Transclusion einwandfrei.

1
OneLunch Man

Sie haben erwähnt, dass Sie es mit AOT versucht haben, aber haben Sie versucht, das Projekt mit dem Befehl full production zu erstellen?

AOT ist eines von vielen Optimierungselementen für angular Projekte.

Wechseln Sie einfach in das Verzeichnis (in dem Sie normalerweise das Projekt ausführen) und geben Sie Folgendes ein: ng build --prod

Verschieben Sie nun die generierten Dateien (Standardordner ist normalerweise ein dist-Ordner?) Auf den Produktionsserver.

Wenn Sie dies nicht ausprobiert haben, wird es eine enorme Verbesserung sein

0
pontusv