Pourquoi le cadre Angular 7 est-il extrêmement lent sur un appareil à faible processeur (Windows 10, 2 Go de RAM, processeur 1 GHz) dans Google Chrome?
J'ai créé un projet simple dans lequel j'ai installé Bootstrap 4 . Mais il semble qu'il faut 8 à 10 secondes pour charger la page et l'utilisation du processeur est de 100%. Il s'agit de la configuration de mon bureau sur laquelle l'utilisation du processeur est élevée.
Je dirige le projet via AOT qui sert --aot. Lors d'un test sur un bureau à faible CPU, il faut 20 à 30 secondes pour charger la page. Alors, c'est comment Angular fonctionne ou pouvons-nous l'améliorer et le charger en une seconde sur un bureau à faible CPU avec cette configuration ?
La partie de script prend 6-7 secondes pour charger la page même après avoir utilisé AOT. ce qui semble beaucoup.
Capture d'écran des performances de ma machine de bureau avec 8 Go de RAM.
En raison de cette utilisation élevée du processeur, le chargement de la page prend beaucoup de temps sur le périphérique à faible processeur.
Ci-dessous mon Angular JSON:
{
"$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"
}
Voici mon fichier JSON de package:
{
"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"
}
}
Je dois me demander combien de ressources il reste sur cette configuration matérielle pour se concentrer sur l'exécution des fichiers ici - Si cette machine exécute win10 32 bits, il y a encore de la place, mais si c'est 64 bits, vous êtes au minimum absolu des ressources recommandées juste pour exécuter le système d'exploitation. En plus de cela, vous avez Chrome et peut-être votre IDE si c'est ouvert, les deux étant considérés comme "encombrants" pour ce matériel. Une dernière mention est le serveur de développement qui fonctionne avec npm start- donc il y a beaucoup de choses qui s'additionnent et rendent ce système complet assez rapide. Le CPU restant et RAM ne peuvent être utilisés que beaucoup (I imaginez plus de blocage et GC doit se produire).
Si vous avez partagé votre utilisation des ressources Windows (étendue) au lieu de simplement Chrome, cela pourrait aider un peu plus.
Façons de tester la version "production" de la build: Exécutez ng build --prod comme d'autres l'ont mentionné. Cela ne générera pas les cartes sources et devrait avoir toutes les optimisations en place pour une construction efficace tout autour. Courir npm i -g http-serverServeur HTTP vous permet de servir légèrement les ressources statiques localement Exécuter http-server ./dist/testapp -g Nav jusqu'à l'une des URL vers lesquelles il pointe
Le -g est supposé pour gzip les requêtes qui peuvent en bénéficier, mais pas si elles ne sont pas suffisamment grandes (quelqu'un d'autre peut en savoir plus sur cette).
Voici donc où je pourrais avoir un peu de chaleur, mais, personnellement, je n'aime pas bootstrap en angulaire, en partie à cause de la mise en œuvre. Je me sens comme matériau angulaire est juste fait pour ça;) Si vous devez utiliser bs (je dois travailler), utilisez plutôt ng-bootstrap , mais il y a d'autres options que je trouve incroyablement bien dans l'écosystème.
En ce qui concerne l'utilisation du processeur, inactif, j'ai une utilisation du processeur de 0,1% pour l'onglet Angular de l'application. Lorsque des événements commencent à se produire dans l'application (comme la souris se déplaçant et similaire), cela va commencer à déclencher des cycles de détection de changement qui consommeront beaucoup de ressources CPU, mais la plupart de cela est résolu en suivant une sorte de composant conteneur -> modèle de composant de présentation (où les composants de présentation sont onPush). des applications de tailles différentes, de la petite à la grande entreprise, et pour une très grande majorité de cas, ce modèle fonctionne très bien grâce aux modèles/prises et à la transclusion.
Vous avez mentionné que vous avez essayé avec AOT, mais avez-vous essayé de construire le projet avec la commande de production complète?
AOT est l'un des nombreux éléments d'optimisation pour les projets angular.
CD simplement dans le répertoire (d'où vous exécutez habituellement le projet) et tapez: ng build --prod
Déplacez maintenant les fichiers générés (le dossier par défaut est généralement dans un dossier dist?) Dans le serveur de production.
Si vous n'avez pas essayé cela, ce sera une énorme amélioration