Ladezeiten verkürzen, Preloading-Strategien und mehr

Angular-Tools und Tipps für bessere App-Performance

| Autor / Redakteur: Thomas Joos / Stephan Augsten

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 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.

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.

Kommentare werden geladen....

Kommentar zu diesem Artikel

Der Kommentar wird durch einen Redakteur geprüft und in Kürze freigeschaltet.

Anonym mitdiskutieren oder einloggen Anmelden

Avatar
Zur Wahrung unserer Interessen speichern wir zusätzlich zu den o.g. Informationen die IP-Adresse. Dies dient ausschließlich dem Zweck, dass Sie als Urheber des Kommentars identifiziert werden können. Rechtliche Grundlage ist die Wahrung berechtigter Interessen gem. Art 6 Abs 1 lit. f) DSGVO.
  1. Avatar
    Avatar
    Bearbeitet von am
    Bearbeitet von am
    1. Avatar
      Avatar
      Bearbeitet von am
      Bearbeitet von am

Kommentare werden geladen....

Kommentar melden

Melden Sie diesen Kommentar, wenn dieser nicht den Richtlinien entspricht.

Kommentar Freigeben

Der untenstehende Text wird an den Kommentator gesendet, falls dieser eine Email-hinterlegt hat.

Freigabe entfernen

Der untenstehende Text wird an den Kommentator gesendet, falls dieser eine Email-hinterlegt hat.

copyright

Dieser Beitrag ist urheberrechtlich geschützt. Sie wollen ihn für Ihre Zwecke verwenden? Infos finden Sie unter www.mycontentfactory.de (ID: 46117934 / Frameworks)