Ich habe eine einfache App, initialisiert von angular-cli
.
Es werden einige Seiten in Bezug auf 3 Routen angezeigt. Ich habe 3 Komponenten. Auf einer Seite springt Nutzung lodash
und Angular 2 HTTP - Module einige Daten (mit RxJS bekommen Observable
s, map
und subscribe
). Ich zeige diese Elemente mit einem einfachen *ngFor
.
Aber trotz der Tatsache, dass meine App wirklich einfach ist, bekomme ich ein riesiges (meiner Meinung nach) Bundle-Paket und Karten. Ich spreche allerdings nicht über gzip-Versionen, sondern über die Größe vor dem gzipping. Diese Frage ist nur eine allgemeine Empfehlung.
Einige Testergebnisse:
ng bauen
Hash: 8efac7d6208adb8641c1 Zeit: 10129 ms Chunk {0} main.bundle.js, main.bundle.map (main) 18,7 kB {3} [initial] [gerendert]
chunk {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 155 kB {4} [initial] [gerendert]
chunk {2} scripts.bundle.js, scripts.bundle.map (scripts) 128 kB {4} [initial] [gerendert]
chunk {3} vendor.bundle.js, vendor.bundle.map (Anbieter) 3,96 MB [initial] [gerendert]
chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 Bytes [Eintrag] [gerendert]
Warten Sie: 10 MB Vendor Bundle-Paket für eine so einfache App?
ng build --prod
Hash: 09a5f095e33b2980e7cc Zeit: 23455 ms Chunk {0} main.6273b0f04a07a1c2ad6c.bundle.js, main.6273b0f04a07a1c2ad6c.bundle.map (main) 18,3 kB {3} [initial] [gerendert]
chunk {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css, styles.bfdaa4d8a4eb2d0cb019.bundle.map, styles.bfdaa4d8a4eb2d0cb019.bundle.map (styles) 154 kB {4} [initial] [gerendert]
chunk {2} scripts.c5b720a078e5464ec211.bundle.js, scripts.c5b720a078e5464ec211.bundle.map (scripts) 128 kB {4} [initial] [gerendert]
chunk {3} vendor.07af2467307e17d85438.bundle.js, vendor.07af2467307e17d85438.bundle.map (vendor) 3.96 MB [initial] [gerendert]
chunk {4} inline.a345391d459797f81820.bundle.js, inline.a345391d459797f81820.bundle.map (inline) 0 Bytes [Eintrag] [gerendert]
Warten Sie noch einmal: So eine ähnliche Vendor-Bundle-Größe für Prod?
ng build --prod --aot
Hash: 517e4425ff872bbe3e5b Zeit: 22856 ms Chunk {0} main.95eadabace554e3c2b43.bundle.js, main.95eadabace554e3c2b43.bundle.map (main) 130 kB {3} [initial] [gerendert]
chunk {1} styles.e53a388ae1dd2b7f5434.bundle.css, styles.e53a388ae1dd2b7f5434.bundle.map, styles.e53a388ae1dd2b7f5434.bundle.map (styles) 154 kB {4} [initial] [gerendert]
chunk {2} scripts.e5c2c90547f3168a7564.bundle.js, scripts.e5c2c90547f3168a7564.bundle.map (scripts) 128 kB {4} [initial] [gerendert]
chunk {3} vendor.41a6c1f57136df286f14.bundle.js, vendor.41a6c1f57136df286f14.bundle.map (vendor) 2.75 MB [initial] [gerendert]
chunk {4} inline.97c0403c57a46c6a7920.bundle.js, inline.97c0403c57a46c6a7920.bundle.map (inline) 0 Bytes [Eintrag] [gerendert]
ng build --aot
Hash: 040cc91df4df5ffc3c3f Zeit: 11011 ms Chunk {0} main.bundle.js, main.bundle.map (main) 130 kB {3} [initial] [gerendert]
chunk {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 155 kB {4} [initial] [gerendert]
chunk {2} scripts.bundle.js, scripts.bundle.map (scripts) 128 kB {4} [initial] [gerendert]
chunk {3} vendor.bundle.js, vendor.bundle.map (Anbieter) 2,75 MB [initial] [gerendert]
chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 Bytes [Eintrag] [gerendert]
Also ein paar Fragen zum Bereitstellen meiner App auf prod:
- Warum sind die Anbieterpakete so groß?
- Wird Baumschütteln von richtig eingesetzt
angular-cli
? - Wie kann diese Bundle-Größe verbessert werden?
- Sind die .map-Dateien erforderlich?
- Sind die Testfunktionen in Bundles enthalten? Ich brauche sie nicht in Prod.
- Allgemeine Frage: Was sind die empfohlenen Tools zum Packen für Produkte? Vielleicht
angular-cli
(mit Webpack im Hintergrund) ist nicht die beste Option? Können wir es besser machen?
Ich habe viele Diskussionen zu Stack Overflow durchsucht, aber keine allgemeine Frage gefunden.
quelle
Antworten:
Update Februar 2020
Da diese Antwort viel Anklang fand, dachte ich, es wäre am besten, sie mit neueren Angular-Optimierungen zu aktualisieren:
ng build --prod --build-optimizer
ist dies eine gute Option für Benutzer von weniger als Angular v5. Bei neueren Versionen erfolgt dies standardmäßig mitng build --prod
Einige behaupten, dass die Verwendung der AOT-Kompilierung die Größe des Vendor-Bundles auf 250 KB reduzieren kann. In BlackHoleGalaxys Beispiel verwendet er jedoch die AOT-Kompilierung und hat immer noch eine Vendor-Bundle-Größe von 2,75 MB
ng build --prod --aot
, die 10x größer ist als die angenommenen 250 KB. Dies ist für Angular2-Anwendungen nicht ungewöhnlich, selbst wenn Sie v4.0 verwenden. 2,75 MB sind immer noch zu groß für alle, die sich wirklich für die Leistung interessieren, insbesondere auf einem mobilen Gerät.Es gibt einige Dinge, die Sie tun können, um die Leistung Ihrer Anwendung zu verbessern:
1) AOT & Tree Shaking (Angular-Cli erledigt dies sofort). Mit Angular 9 ist AOT standardmäßig in der Produkt- und Entwicklungsumgebung.
2) Verwenden des serverseitigen Renderings von Angular Universal AKA (nicht in CLI)
3) Web Worker (wieder nicht in CLI, aber eine sehr gefragte Funktion)
siehe: https://github.com/angular/angular-cli/issues/2305
4) Servicemitarbeiter
sehen: https://github.com/angular/angular-cli/issues/4006
Möglicherweise benötigen Sie nicht alle diese Funktionen in einer einzigen Anwendung. Dies sind jedoch einige der Optionen, die derzeit zur Optimierung der Angular-Leistung verfügbar sind. Ich glaube / hoffe, dass Google sich der sofort einsatzbereiten Leistungsmängel bewusst ist und plant, diese in Zukunft zu verbessern.
Hier ist eine Referenz, die ausführlicher auf einige der oben genannten Konzepte eingeht:
https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294
quelle
sw-precache
weigern sich Dienstprogramme wie die Bearbeitung von Anbieterpaketen mit mehr als 2 MB.Verwenden Sie die neueste Angular-CLI- Version und den Befehl ng build --prod --build-optimizer. Dadurch wird die Build-Größe für prod env definitiv reduziert .
Dies macht der Build-Optimierer unter der Haube:
Der Build-Optimierer hat zwei Hauptaufgaben. Erstens können wir Teile Ihrer Anwendung als rein markieren. Dies verbessert das Baumschütteln, das durch die vorhandenen Tools bereitgestellt wird, und entfernt zusätzliche Teile Ihrer Anwendung, die nicht benötigt werden.
Das zweite, was der Build-Optimierer tut, ist das Entfernen von Angular-Dekoratoren aus dem Laufzeitcode Ihrer Anwendung. Dekorateure werden vom Compiler verwendet und werden zur Laufzeit nicht benötigt und können entfernt werden. Jeder dieser Jobs verringert die Größe Ihrer JavaScript-Bundles und erhöht die Startgeschwindigkeit Ihrer Anwendung für Ihre Benutzer.
Hinweis : Ein Update für Angular 5 und
ng build --prod
höher , das sich automatisch um den obigen Prozess kümmert :)quelle
Je nachdem, wie Sie daraus importieren, kann Lodash einen Fehlercode in Ihr Bundle einbringen. Beispielsweise:
Persönlich wollte ich immer noch kleinere Stellflächen von meinen Dienstprogrammfunktionen.
flatten
Kann beispielsweise1.2K
nach der Minimierung bis zu Ihrem Bundle beitragen . Also habe ich eine Sammlung vereinfachter Lodash-Funktionen aufgebaut. Meine Implementierungflatten
trägt dazu bei50 bytes
. Sie können hier nachsehen, ob es für Sie funktioniert: https://github.com/simontonsoftware/micro-dashquelle
source-map-explorer
.)Erstens sind Anbieter-Bundles einfach deshalb riesig, weil Angular 2 auf vielen Bibliotheken basiert. Die Mindestgröße für die Angular 2-App beträgt ca. 500 KB (in einigen Fällen 250 KB, siehe unterer Beitrag).
Baumschütteln wird von richtig eingesetzt
angular-cli
.Sie nicht enthalten
.map
Dateien, verwendet , da nur für das Debuggen. Wenn Sie ein heißes Ersatzmodul verwenden, entfernen Sie es außerdem, um den Hersteller zu entlasten.Um für die Produktion zu packen, verwende ich persönlich Webpack (und Angular -Cli verlässt sich auch darauf ), weil Sie wirklich
configure everything
für die Optimierung oder das Debuggen können.Wenn Sie verwenden möchten
Webpack
, stimme ich zu, dass es auf den ersten Blick etwas schwierig ist, aber wenn Sie sich die Tutorials im Internet ansehen, werden Sie nicht enttäuscht sein.Andernfalls verwenden Sie
angular-cli
, die die Arbeit wirklich gut erledigen.Die Verwendung der Ahead-of-Time-Kompilierung ist obligatorisch, um Apps zu optimieren und die Angular 2-App auf 250 KB zu verkleinern .
Hier ist ein Repo, das ich erstellt habe ( github.com/JCornat/min-angular ), um die minimale Winkelbündelgröße zu testen, und ich erhalte 384 KB . Ich bin sicher, dass es einen einfachen Weg gibt, es zu optimieren.
Apropos große Apps: Mit der AngularClass / Angular-Starter- Konfiguration, wie im obigen Repo, stieg meine Bundle-Größe für große Apps (über 150 Komponenten ) von 8 MB (4 MB ohne Kartendateien) auf 580 KB .
quelle
Bei der folgenden Lösung wird davon ausgegangen, dass Sie Ihren dist / Ordner mit nodejs bereitstellen. Bitte verwenden Sie die folgenden app.js in der Root-Ebene
Stellen Sie sicher, dass Sie Abhängigkeiten installieren.
Erstellen Sie nun die App
Erstellen Sie einen Ordner mit dem Namen
vendor
innerhalb dessrc
Ordners und innerhalb des Lieferantenordners. Erstellen Sie eine Dateirxjs.ts
und fügen Sie den folgenden Code ein.Fügen Sie dann das Folgende in die
tsconfig.json
Datei Ihrer Angular-Cli -Anwendung ein. Fügen Sie dann incompilerOptions
den folgenden json hinzu;Dadurch wird Ihre Build-Größe viel zu klein. In meinem Projekt habe ich die Größe von 11 MB auf 1 MB reduziert. Ich hoffe es hilft
quelle
Eine Sache, die ich teilen möchte, ist, wie importierte Bibliotheken die Größe des dist erhöhen. Ich hatte ein Angular2-Moment-Paket importiert, während ich alle erforderlichen Datums- und Uhrzeitformatierungen mit der aus @ angle / common exportierten Standard-DatePipe durchführen konnte.
Mit Angular2-Moment
"angular2-moment": "^1.6.0",
Nachdem Sie Angular2-moment entfernt und stattdessen DatePipe verwendet haben
Beachten Sie, dass das Vendor Bundle ein halbes Megabyte reduziert hat !
Es lohnt sich zu prüfen, was eckige Standardpakete auch dann tun können, wenn Sie bereits mit einer externen Bibliothek vertraut sind.
quelle
Eine andere Möglichkeit, das Bundle zu reduzieren, besteht darin, GZIP anstelle von JS bereitzustellen. Wir gingen von 2.6mb auf 543ko.
https://httpd.apache.org/docs/2.4/mod/mod_deflate.html
quelle
Wenn Sie ausgeführt haben,
ng build --prod
sollten Sie überhaupt keinevendor
Dateien haben .Wenn ich nur laufe,
ng build
bekomme ich folgende Dateien:Die Gesamtgröße des Ordners beträgt ~ 14 MB. Waat! : D.
Aber wenn ich laufe,
ng build --prod
bekomme ich folgende Dateien:Die Gesamtgröße des Ordners beträgt 584 KB.
Ein und derselbe Code. Ich habe Ivy in beiden Fällen aktiviert. Winkel ist 8.2.13.
Also - ich denke, Sie haben
--prod
Ihren Build-Befehl nicht erweitert?quelle
Wenn Sie Angular 8+ verwenden und die Größe des Bundles reduzieren möchten, können Sie Ivy verwenden. Ivy ist die Standard-Ansichts-Engine in Angular 9. Gehen Sie einfach zu src / tsconfig.app.json und fügen Sie den Parameter angleCompilerOptions hinzu, zum Beispiel:
quelle
Dies hat die Größe in meinem Fall reduziert:
Für Angular 5+ ng-build --prod führt dies standardmäßig aus. Die Größe nach dem Ausführen dieses Befehls wurde von 1,7 MB auf 1,2 MB reduziert, aber für meinen Produktionszweck nicht ausreichend.
Ich arbeite auf der Facebook Messenger-Plattform und Messenger-Apps müssen kleiner als 1 MB sein, um auf der Messenger-Plattform ausgeführt zu werden. Ich habe versucht, eine Lösung für effektives Baumschütteln zu finden, aber immer noch kein Glück.
quelle
Es funktioniert 100% ng build --prod --aot --build-optimizer --vendor-chunk = true
quelle
Ich habe eine eckige 5 + Spring Boot App (application.properties 1.3+) mit Hilfe der Komprimierung (Link unten angefügt) konnte die Größe von main.bundle.ts von 2,7 MB auf 530 KB reduzieren.
Außerdem sind --aot und --build-optimizer standardmäßig im --prod-Modus aktiviert. Sie müssen diese nicht separat angeben.
https://stackoverflow.com/a/28216983/9491345
quelle
Überprüfen Sie, ob Sie eine Konfiguration mit dem Namen "Produktion" für ng build --prod haben, da dies eine Abkürzung für ng build --configuration = Produktion ist. Keine Antwort hat mein Problem gelöst, da das Problem direkt vor dem Bildschirm lag. Ich denke, das könnte durchaus üblich sein ... Ich habe die App mit i18n internationalisiert und alle Konfigurationen in zB Production-en umbenannt. Dann habe ich mit ng build --prod erstellt, unter der Annahme, dass die Standardoptimierung verwendet wird und nahezu optimal sein sollte, aber tatsächlich wurde nur ng build ausgeführt, was zu einem 7-MB-Bundle anstelle von 250 KB führte.
quelle
Entnommen aus den eckigen Dokumenten v9 ( https://angular.io/guide/workspace-config#alternate-build-configurations ):
Darüber hinaus können Sie alle Ihre Deployables mit @ angle-builders / custom-webpack: browser builder komprimieren, wobei Ihre benutzerdefinierte webpack.config.js folgendermaßen aussieht:
Anschließend müssen Sie Ihren Webserver so konfigurieren, dass komprimierte Inhalte bereitgestellt werden, z. B. mit nginx, das Sie Ihrer nginx.conf hinzufügen müssen:
In meinem Fall schrumpfte der dist-Ordner von 25 auf 5 MB, nachdem nur --prod in ng build verwendet wurde, und schrumpfte dann nach der Komprimierung weiter auf 1,5 MB.
quelle