Wie Sie richtig bauen ein zu optimieren Winkel 5 Projekt?
Ich bin neu in Winkel-5 Projekt. Ich lief ng build --prod
zu generieren dist/
Ordner.
Bemerkte ich, es dauert eine lange Zeit zu bauen, und wenn ich öffnete meine dist/
Ordner, die ich sah, hat es fast 98% Unnützes Zeug drin, wie SVGs, Bilder und so weiter ..
Wie kann ich kontrollieren, was geht in meinem dist/
?
.Winkel-cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "web"
},
"apps": [{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/ngx-toastr/toastr.css",
"../src/assets/css/style.css",
"../src/assets/css/colors/blue.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/jquery-slimscroll/jquery.slimscroll.min.js",
"../node_modules/pace-js/pace.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
Paket.json
{
"name": "web",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --port 4202",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "5.1.0",
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@angular/router": "5.0.3",
"@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
"@ngx-translate/core": "8.0.0",
"@types/jquery": "3.2.16",
"angular2-image-upload": "^1.0.0-rc.0",
"bootstrap": "4.0.0-beta.2",
"core-js": "2.4.1",
"jquery": "3.2.1",
"jquery-slimscroll": "1.3.8",
"ngx-toastr": "8.0.0",
"ngx-uploader": "4.2.1",
"pace-js": "1.0.2",
"popper.js": "1.13.0",
"rxjs": "5.5.0",
"sticky-kit": "1.1.3",
"zone.js": "0.8.4"
},
"devDependencies": {
"@angular/cli": "^1.6.4",
"@angular/compiler-cli": "5.0.3",
"@angular/language-service": "5.0.3",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}
Wie kann ich optimieren es? Und nur das bauen, was verlangen die für meine Website?
Derzeit dauert es 15 Minuten, um zu bauen auf meinem server. Wie kann ich es machen das bauen schneller?
- Was meinst du mit 'Unnützes Zeug'? Außerdem was meinst du mit optimieren? Schneller? Kleiner? Beide? Wenn ja, was ist Ihre Leistung?
- 15 min ist zu viel. Können Sie geben einige details auf die Gesamtgröße dist dir? Ich sehe keine sinnlose Dinge in meine prod bauen, und es hat nur Bilder, die ich verwenden in der Projekt-und nichts ist nutzlos für mich und dauert 75 Sekunden. Es wäre auch toll, wenn Sie den Bildschirm freigeben sobald der Bau fertig.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Für das bauen zu langsam Sie können diese version des kantigen cli:
"@angular/cli": "1.7.0-beta.0",
dieser Schnitt meine Gebäude mal von 30 Minuten auf 3 Minuten.
Im Winkel 5, AOT und bauen-Optimierer sind standardmäßig in prod baut.
ng build --prod --named-chunks
hinzufügen --namens-chunks, die zu deinem build Befehl wird Ihnen benannten Stücke, so können Sie besser analysieren, Sie die Brocken, und eine bessere zu verbessern, was Sie importieren, in jedem Modul.Ein Beispiel, dass vielleicht importieren Sie den gesamten freigegebenen Modul in ein bestimmtes Modul zu, während Sie nur eine Sache von diesem gemeinsamen Modul
package.json
ich scheint, um diese Fehler die ganze ZeitError: Cannot find module '@angular-devkit/core'
Müssen Sie einen moment Zeit nehmen, zu analysieren, Ihre Abhängigkeiten und die Auswirkungen, die Sie auf Ihr baut dist-Ausgang.
Bauen mit:
(Obwohl einige dieser Argumente implizit sind, wählte ich die Ausführlichkeit in der Veranstaltung, die Umgebung wurde geändert, über Standardwerte.)
Die Ausgabe einer
stats.json
- Datei, kann dann analysiert werden, mitwebpack-bundle-analyzer
mit:webpack-bundle-analyzer dist/stats.json
Entfernen Sie nicht benötigte Bibliotheken, umgestalten, um den Baum zu schütteln, ersetzen unverantwortlich großen Bibliotheken mit alternativen.
Ohne zu sehen, Ihr Paket.json-Inhalt dies sollte Ihnen einen Ausgangspunkt zu verstehen-Optimierung für die Produktion.
Referenzen:
webpack-bundle-analyzer
Ein tolles tool, das ich fand, war source map explorer. Es ist ein tool, das zeigt dir Raum für alle Einfuhren, die Sie in ein Modul. Das Bild ist ein Beispiel für mein admin Modul wenn ich source map explorer:
Dieses tool hat mir sehr geholfen verweist mich einige Importe, die ich vergessen zu entfernen und war, dass meine Dateien zu groß.
Es ist nicht Schrott, die ng build-Befehl standardmäßig werden pick-up der Entwickler-Profil und bauen die dist-mit allen die gewünschte Datei auf Ihr Projekt(ts bekommen kompiliert js zum Beispiel). Weil es ein dev-Profil standardmäßig sehen Sie, was wie benannt wird .chunk-Datei unter andere Sache.Entwickler Profil-und prod-Profil auch verschiedene Abhängigkeiten, die je nach Ihrem Paket.json-Datei.
sehen https://github.com/angular/angular-cli/wiki/build für
Verwenden Sie diesen Befehl, um die Optimierung der build für eckige 5/6:
max_old_space_size
auf den Knoten Prozess scheint ein wenig seltsam. Können Sie erläutern, wie Sie mehr darüber, wie Sie sich entschieden, das nötig war für Ihre situation, warum es möglicherweise für andere Benutzer, und wie es hilft, verbessern Sie bauen mal? Hinzufügen--aot
und--build-optimizer
würde der Aufbau noch länger dauern, als der Befehl in der ursprünglichen Frage.ng build --prod
bereits implizit verwendet, ahead-of-time (AOT) Zusammenstellung so dass keine Notwendigkeit für-aot
.können Sie laufen
brotli
Kompression nach dem Aufbau der Produktion, die Verbesserung der Ladezeit.https://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/