Suchen

Ladezeiten verkürzen, Preloading-Strategien und mehr Angular-Tools und Tipps für bessere App-Performance

| Autor / Redakteur: Thomas Joos / Stephan Augsten

Das Team von Angular gibt Tipps für die Verwendung neuer Tools und Vorgehensweisen für die Verbesserung der Performance von Apps. Dazu gehört eine Verbesserung der Ladezeiten, Code-Preloading und einiges mehr.

Angular hat einige Tipps für bessere Ladezeiten und schnellere Seitennavigation veröffentlicht.
Angular hat einige Tipps für bessere Ladezeiten und schnellere Seitennavigation veröffentlicht.
(Bild: Angular.io)

Das Angular-Team zeigt neue Tools und Vorgehensweisen, die Entwickler nutzen können, um Ladezeiten von Programmen zu verkürzen und die Navigation zu beschleunigen. Auch das Verbessern der Gesamtleistung steht im Fokus der Tools und Vorgehensweisen. Das Team befasst sich dazu mit Code-Splitting, Preloading-Strategien, Leistungsbudgets und effizienter Unterstützung von Entwicklern bei der Gewinnung und Bindung von Benutzern.

Das Angular-Team empfiehlt die Beseitigung von Mini- und Dead-Code sowie die Aufteilung von Codes über Code-Splitting. In der Version 8 von Angular bietet die CLI differentielle Ladeunterstützung. Die Bundles für moderne oder ältere JavaScript-Browser werden dadurch aufgeteilt.

Wenn Browser eine JavaScript-Datei herunterladen, muss diese oft dekomprimiert, analysiert und dann ausgeführt werden. Die Leistung einer App kann daher deutlich gesteigert werden, wenn weniger Bytes JavaScript während der ersten Ladezeit geladen werden müssen.

Code-Splitting ermöglicht es Entwicklern zu steuern, wie sie JavaScript-Bundles reduzieren können. Die Ansätze zum Code-splitting umfassen die Komponentenebene und die Routenebene. Die Codeaufteilung auf Komponentenebene kann einzelne Komponenten auch ohne Routennavigation laden. Wenn sich der Benutzer auf der Startseite einer App befindet und zur Einstellungsseite navigiert, lädt Angular das entsprechende Bundle herunter und rendert danach die Route. Das verbessert die Leistung.

Der Hauptunterschied zwischen diesen beiden Techniken besteht darin, dass mit dem Code-Splitting auf Komponentenebene einzelne Komponenten auch ohne Routennavigation geladen werden kann. Beispielsweise wird die Komponente, die einer Chatbox zugeordnet ist, erst geladen, wenn der Benutzer auf einen Platzhalter klickt.

Entwickler können ngx-loadable und @herodevs/hero-loader-Bibliotheken verwenden, um das Code-Splitting auf Komponentenebene durchzuführen. Für das Code-Splitting auf Routenebene hat Angular einen neuen Befehl hinzugefügt, der es Benutzern ermöglicht, ein Modul in einem einzigen Befehl zu erzeugen. Das Angular-Team hat auch eine Preloading-Strategie für Routen hinzugefügt.

Angular bietet einen Quicklink für Preloading-Module, die mit sichtbaren Links verbunden sind, sowie ein prädiktives Prefetching für Preloading-Module, die als nächstes benötigt werden.

(ID:46117934)

Über den Autor

 Thomas Joos

Thomas Joos

Freiberuflicher Autor und Journalist