Optimierung von Winkelanwendungen

Angular ist das beliebteste Framework für die Entwicklung einseitiger Webanwendungen. Dies bedeutet jedoch nicht, dass Angular-Anwendungen nur eine Seite enthalten können. Mit diesem Framework können Sie Websites erstellen, die aus Dutzenden von Seiten bestehen. Die neueste Version von Angular ist dank der Bemühungen des Entwicklungsteams und der Community von Enthusiasten gut optimiert. Wenn es jedoch um eine bestimmte Anwendung geht, sollte man einige Dinge nicht vergessen, die sich auf die Leistung auswirken.



Das Material, dessen Übersetzung wir heute veröffentlichen, wird sechs Bereiche der Optimierung von Winkelanwendungen aufzeigen.

1. Lazy Loading und Optimierung des Hauptbündels

Wenn beim Vorbereiten der Produktionsversion der Anwendung kein verzögertes Laden verwendet wird, werden höchstwahrscheinlich im Ordner dist die folgenden Dateien angezeigt.

 polyfills.js scripts.js runtime.js styles.css main.js 

Mit der Datei polyfills.js können polyfills.js sicherstellen, dass eine Anwendung, die mit den neuesten Webtechnologiefunktionen geschrieben wurde, mit verschiedenen Browsern kompatibel ist.

Die Datei script.js enthält die im Abschnitt angular.json Datei angular.json beschriebenen scripts . Hier ist ein einfaches Beispiel für einen solchen Abschnitt.

 "scripts": [  "myScript.js", ] 

Die Datei runtime.js ist der Webpack-Loader. Es enthält die Webpack-Tools, die zum Herunterladen anderer Dateien erforderlich sind.

Die Datei styles.css enthält die Stile, die im Abschnitt angular.json Datei angular.json . Hier ist ein Beispiel für diesen Abschnitt.

 "styles": [ "src/styles.css", "src/my-custom.css" ], 

In der Datei main.js wird der gesamte Anwendungscode gespeichert, einschließlich Komponenten (TS-, HTML- und CSS-Code), Pipelines, Anweisungen, Dienste und importierte Module (einschließlich Module von Drittanbietern).

Wenn die Anwendung wächst und sich main.j wächst main.j Größe der Datei main.j Dies kann zu einem Problem werden, da der Browser zum main.js einer Seite neben der Lösung anderer Aufgaben zur Datenvisualisierung die Datei main.js herunterladen und analysieren main.js . Wenn diese Datei groß genug ist, ist ihre Verarbeitung nicht nur für Mobilgeräte, sondern auch für Desktop-Browser eine schwierige Aufgabe.

Der einfachste Weg, um dieses Problem zu lösen, besteht darin, die Anwendung in mehrere Module zu unterteilen, die die Lazy-Loading-Technik verwenden. Bei diesem Ansatz generiert Angular für jedes Modul eine separate Datei, die erst heruntergeladen wird, wenn dies erforderlich wird (normalerweise beim Aktivieren einer bestimmten Route).

Um die Anwendung der Lazy-Loading-Technik zu demonstrieren, wurden zwei Komponenten erstellt - app.component und second.component . Beide befinden sich im Modul app.module Bei der Arbeit mit ihnen wird kein verzögertes Laden angewendet.

Die Komponente app.component äußerst einfach. Es werden zwei Schaltflächen angezeigt, von denen eine für das Umschalten auf second.component , und die zweite führt zurück zu app.component .


Komponenten-App

Die Vorlage für die Second Komponente enthält einen sehr großen Text mit einem Volumen von ca. 1 MB.


Zweite Komponente

Da die Technik des verzögerten Ladens hier nicht angewendet wird, verfügt unsere Anwendung über eine große Datei main.js , die den Code app.component und second.component .

Wenn Sie die Chrome-Entwicklertools öffnen und die Registerkarte "Netzwerk" aufrufen, können Sie die Größe der Datei " main.js . Es ist nämlich 1,3 Mb.


Analysieren von Dateigrößen mit Chrome Developer Tools

Das Problem hierbei ist, dass sich der Benutzer die meiste Zeit bei der Arbeit mit unserem Projekt auf seiner Hauptseite und nicht auf einer anderen Seite befindet. Daher ist es keine gute Idee, den gesamten Code als einzelne Datei herunterzuladen. Der Code der zweiten Komponente kann in einem separaten Modul herausgenommen werden, das nur geladen wird, wenn der Benutzer zur entsprechenden Seite wechselt. Dies führt zu einer erheblichen Reduzierung der Datei main.js , wodurch die Hauptseite der Site sehr schnell zum ersten Mal geladen wird.

Bei Verwendung der Technik des verzögerten Ladens wird nach Abschluss des Projekterstellungsprozesses eine Datei wie 4.386205799sfghe4.js erstellt. Hier wird der Code gespeichert, der beim ersten Laden der Site nicht geladen wird. Wenn Sie jetzt die Site öffnen und analysieren, stellt sich heraus, dass die Größe von main.js nur 266 main.js .


Downsizing main.js

Eine große zusätzliche Datei von 1 MB wird erst heruntergeladen, nachdem Sie auf die entsprechende Seite gegangen sind.


Zusätzliche Datei herunterladen

Wir haben Lazy Loading angewendet, aber wir können nicht sagen, dass eine solche Lösung vollständig zu uns passt. Tatsache ist, dass dieser Ansatz den ersten Übergang des Benutzers zur Seite verlangsamt, für deren Ausgabe eine separate große Datei benötigt wird. Glücklicherweise bietet Angular ein Mittel, um dieses Problem zu lösen. Wir sprechen nämlich über die PreloadingStrategy- Technologie.

Mithilfe dieser Funktion können wir dem Framework mitteilen, dass nach dem Laden und Verarbeiten des Hauptmoduls ( main.js Datei) im Hintergrund andere Module geladen werden. Wenn der Benutzer eine Seite aufruft, auf der zuvor eine große Datei angezeigt werden musste, stellt sich heraus, dass die Datei bereits heruntergeladen wurde. Hier ist ein Beispielcode, der alle Module vorlädt.

 import { PreloadAllModules, RouterModule } from '@angular/router'; RouterModule.forRoot( [ {   path: 'second',   loadChildren: './second/second.module#SecondModule' } ], {preloadingStrategy: PreloadAllModules}) 

Bei der Optimierung von Angular-Anwendungen wird empfohlen, das Projekt in möglichst viele Module aufzuteilen. Außerdem müssen Sie darauf achten, sie vorzuladen. Dadurch kann die Datei main.js klein sein, was ein schnelleres Laden und Anzeigen der Hauptseite des Projekts bedeutet.

2. Bundle-Analyse mit Webpack Bundle Analyzer

Wenn sich herausstellt, dass main.js auch nach Aufteilung der Projektlogik in viele Module immer noch zu groß ist (für kleine und mittlere Anwendungen schlägt der Autor dieses Materials vor, dass die Datei 1 MB groß ist), können Sie die Anwendung mit dem Webpack Bundle Analyzer weiter optimieren. Mit diesem npm-Paket können Sie die Ergebnisse von Webpack in einer Baumstruktur visualisieren, die das Zoomen unterstützt. Um Webpack Bundle Analyzer zu verwenden, installieren Sie es in einem Angular-Projekt als Entwicklungsabhängigkeit.

 npm install --save-dev webpack-bundle-analyzer 

Anschließend ändern wir den package.json Datei package.json , indem wir den folgenden Text hinzufügen.

 "bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json" 

Bitte beachten Sie, dass die Adresse der Datei dist/stats.json in Ihrem Projekt unterschiedlich sein kann. Wenn Sie beispielsweise die Bundle-Dateien im Ordner dist/browser , müssen Sie die obige Zeile wie folgt umschreiben: dist/browser/stats.json .

Führen Sie nun den Analysator aus.

 npm run bundle-report 

Nach Ausführung dieses Befehls wird die Produktionsassembly der Anwendung generiert und Statistiken für jedes Bundle angezeigt. So sieht das Ergebnis der Visualisierung dieser Daten aus.


Projektanalyse mit Webpack Bundle Analyzer

Jetzt können Sie die Zusammensetzung jedes Bundles analysieren. Dies ist ein sehr nützliches Tool, mit dem Sie Abhängigkeiten identifizieren können, auf die Sie verzichten können.

3. Erstellen mehrerer kleiner Module zum Teilen

Module, die verschiedene Teile der Anwendung gemeinsam nutzen, tragen zur Implementierung des DRY- Prinzips bei, aber manchmal werden sogar solche Module im Laufe der Entwicklung der Anwendung immer mehr. Wenn wir beispielsweise ein bestimmtes SharedModule Modul haben, das viele andere Module, Komponenten und Pipelines enthält, erhöht das Importieren eines solchen Moduls in app.module die Größe des main.js Bundles, da ein solcher Schritt nicht nur zum Import dessen main.js , was main.js benötigt. aber auch alles was in SharedModule . Um diese Situation zu vermeiden, können Sie ein anderes Modul erstellen, z. B. HomeSharedModule , das vom Hauptmodul und seinen Komponenten gemeinsam genutzt werden soll.

Das Vorhandensein mehrerer Module, die zum Teilen vorgesehen sind, im Projekt ist besser als das Vorhandensein nur eines solchen Moduls, das normalerweise große Größen aufweist.

4. Verwenden der Technik des verzögerten Ladens für Bilder, die auf der Seite nicht sichtbar sind

Wenn Sie die Hauptseite der Anwendung zum ersten Mal laden, stellt sich möglicherweise heraus, dass sie Bilder enthält, die für den Benutzer nicht sichtbar sind (sie befinden sich außerhalb des Anzeigebereichs). Um sie zu sehen, müssen Sie die Seite scrollen. Diese unsichtbaren Bilder werden jedoch geladen, wenn die Seite geladen wird. Wenn es viele davon gibt, wirkt sich dies auf die Geschwindigkeit beim Laden der Seite aus. Um dieses Problem zu lösen, können Sie die Technik des verzögerten Ladens auf Bilder anwenden und diese nur laden, wenn der Benutzer sie erreicht. Es gibt ein nützliches JS-Tool, Intersection Observer , mit dem das langsame Laden von Bildern einfach implementiert werden kann. Darüber hinaus können Sie zur Wiederverwendung auf dieser Grundlage eine entsprechende Richtlinie erstellen. Details dazu finden Sie hier .

5. Verwenden des virtuellen Bildlaufs für lange Listen

Die siebte Version von Angular bietet die Möglichkeit, virtuelles Scrollen zu verwenden . Diese Technologie lädt Elemente in das DOM und entlädt sie basierend darauf, wie viel von der Liste für den Benutzer sichtbar ist. Dies beschleunigt die Arbeit von Anwendungen, die lange Listen verwenden, erheblich.


Auf der Seite werden nur sichtbare Listenelemente angezeigt.

6. Verwenden der FOUT-Strategie zum Arbeiten mit Schriftarten anstelle der FOIT-Strategie

Viele Websites verwenden benutzerdefinierte Schriftarten. Sie sehen normalerweise sehr attraktiv aus, aber ihre Anwendung belastet den Browser zusätzlich, da diese Schriftarten heruntergeladen und für die Arbeit vorbereitet werden müssen. Wenn Sie nicht standardmäßige Schriftarten verwenden, die beispielsweise von einem Drittanbieter wie Google Fonts heruntergeladen wurden, sind die folgenden zwei Szenarien möglich:

1. Der Browser lädt die Schriftart herunter, verarbeitet sie und zeigt erst dann den Text an. Bis die Schriftart einsatzbereit ist, bleibt der in diese Schriftart eingegebene Text unsichtbar. Dies wird als FOIT (Flash of Unible Text) bezeichnet.
2. Der Browser zeigt zunächst Text mit einer Standardschrift an, während eine externe Schrift geladen wird. Wenn diese Schriftart einsatzbereit ist, ändert sich die Standardschriftart in diese bestimmte Schriftart. Infolgedessen stellt sich heraus, dass der Text auf der Seite in einer Standardschriftart angezeigt wird, bis eine spezielle Schriftart geladen wird. Danach wird der Text erneut angezeigt, jedoch mit einer neuen Schriftart. Dies wird als FOUT (Flash of unstyled text) bezeichnet.

Die meisten Browser verwenden nicht standardmäßige Schriftarten mit der FOIT-Strategie. Die FOUT-Strategie wird nur in Internet Explorer verwendet. Um FOUT anstelle von FOIT zu verwenden, können Sie den font-display Deskriptor für @font-face und dem Browser mitteilen, ob der Text zuerst in einer Standardschrift und dann in unserer angezeigt werden soll, oder ob wir mit einer bestimmten Zeit der Textunsichtbarkeit zufrieden sind . Wenn Sie sich für das Thema Schriftarten interessieren, schauen Sie sich dieses Material an. Hier finden Sie insbesondere Informationen zu den Funktionen der Schriftarten und Empfehlungen zur Auswahl der FOIT- oder FOUT-Strategien.

Zusammenfassung

Hier haben wir uns verschiedene Techniken zur Optimierung von Angular-Anwendungen angesehen. In der Tat gibt es noch viel mehr. Insbesondere geht es um Server-Rendering, den Einsatz von Servicemitarbeitern und AMP-Seiten. Die Zweckmäßigkeit der Optimierung und die Auswahl der Methoden hängen von einem bestimmten Projekt ab - von seinen Merkmalen und Zielen.

Liebe Leser! Welche Ansätze verwenden Sie, um Angular-Anwendungen zu optimieren?