Lazy Loading in Angular: Ein vollständiger Anfängerleitfaden

Angular, ein weit verbreitetes JavaScript-Framework, glänzt bei der Erstellung dynamischer Web-Apps, wobei Lazy Loading als Schlüsselmerkmal die Effizienz und Benutzererfahrung verbessert. Diese Technik ermöglicht das Laden bestimmter Anwendungskomponenten nur bei Bedarf, wodurch die anfänglichen Ladezeiten verkürzt und die Leistung gesteigert werden. Dieser anfängerfreundliche Leitfaden behandelt Lazy Loading in Angular und untersucht dessen Bedeutung und Implementierung in Angular-Anwendungen.

I. Was ist Lazy Loading in Angular?

Lazy Loading in Angular bezeichnet die Technik, Website-Komponenten, Module oder Assets gezielt dann zu laden, wenn sie benötigt werden, anstatt alles auf einmal. Dieser Ansatz ist besonders relevant in Angulars Single Page Applications (SPA), bei denen traditionell alle Komponenten gleichzeitig geladen werden, was möglicherweise unnötige Bibliotheken oder Module einschließt. Während dies bei kleineren Anwendungen kaum ins Gewicht fällt, kann es bei größeren Anwendungen zu längeren Ladezeiten führen. Daher optimiert Lazy Loading die Leistung, indem sichergestellt wird, dass Komponenten und Module nur bei Bedarf geladen werden.

II. Vorteile von Lazy Loading in Angular

Mehr erfahren unter:

• Open-Source-Software Bedeutung: Ein aufschlussreicher Überblick
• Top 10 der besten plattformübergreifenden App-Entwicklungs-Frameworks

III. Lazy Loading in Angular implementieren

Hier ist ein unverzichtbarer Leitfaden zur Implementierung von Lazy Loading in einer Angular-App.

Schritt 1: Erstellen Sie ein Modul zusammen mit einer dedizierten Routing-Datei.

Dies ist entscheidend für die Verwaltung der Angular-Lazy-Loading-Komponenten innerhalb der Module von Angular 11.

Verwenden Sie dazu den folgenden Befehl, um ein Modul namens ‚lazy-loading‘ mit zugehörigem Routing zu generieren:

Warum mit einem Modul beginnen? Weil Sie in Angular keine einzelnen Komponenten lazy loaden können. Diese Einschränkung ergibt sich aus der Architektur von Angular. Man kann sich ein Modul in Angular als eine Sammlung vorstellen, die Komponenten, Services, Pipes und mehr enthält. Es ist wie ein Paket, das alle enthaltenen Elemente und deren Abhängigkeiten auflistet.

In der Verteilung Ihrer Anwendung bilden diese Abhängigkeiten zusammen ein „Chunk“ – im Wesentlichen ein Stück transpilierten JavaScript-Codes. Der Haupt-Chunk enthält Module, die direkt importiert werden, während die für Lazy Loading vorgesehenen Module in einem separaten Chunk gruppiert sind. Wichtig ist, dass Module einen Chunk bilden können, einzelne Komponenten jedoch nicht. Daher ist es nicht möglich, eine einzelne Komponente lazy zu laden.

Schritt 2: Erstellen Sie eine Komponente für Lazy Loading in Angular

In dieser Phase entwickeln wir ein Angular-Modul für Lazy Loading-Komponenten.

Betrachten wir zum Beispiel eine Social-Media-Plattform. Stellen Sie sich vor, es gibt eine Route namens ‚/user-dashboard‘, die die Benutzer-Dashboard-Oberfläche anzeigt. Diese umfasst Funktionen wie das Erstellen eines neuen Beitrags, das Anzeigen vergangener Beiträge und andere Benutzeraktivitäten. Wir erstellen eine Komponente für diesen Zweck und nennen sie user-dashboard.

Verwenden Sie diesen Befehl, um sie zu erstellen:

Schritt 3: Fügen Sie den Link in die Kopfzeile ein

Platzieren Sie einen Link in der Kopfzeile für die Route, bei der Lazy Loading angewendet werden soll. Wenn Sie beispielsweise möchten, dass die ‚user-dashboard‘-Komponente nur geladen wird, wenn ihre spezifische Route aufgerufen wird, fügen Sie den folgenden Link in die Kopfzeile für die Route ‚/user-dashboard‘ ein.

Hier ist der notwendige Codeausschnitt für app.component.html:

Schritt 4: Implementieren Sie Lazy Loading mit loadChildren

In diesem Schritt implementieren wir Lazy Loading für die Route ‚/user-dashboard‘ mit loadChildren. Dies kann auf zwei verschiedene Arten erfolgen:

• Mit Promise
• Mit Async

Mit Promise

Zunächst betrachten wir die Implementierung von Lazy Loading in Angular mit loadChildren unter Verwendung eines promise-basierten Ansatzes. Ändern Sie dazu die Datei app-routing.module.ts wie folgt:

Hier wird die Route ‚/user-dashboard‘ in der Eigenschaft path angegeben. Wichtig ist, dass die Import-Anweisung auch das von uns erstellte Lazy-Loading-Modul lädt.

Dieser Codeausschnitt verwendet eine promise-basierte Syntax, um anzugeben, welche Routen lazy geladen werden sollen. Die für Lazy Loading vorgesehenen Routen sind in der Eigenschaft loadChildren enthalten, wie gezeigt. Während Promises grundlegend sind, bevorzugen neuere Versionen wie Angular 11 möglicherweise einen schlankeren Codeansatz.

Mit Async

Alternativ kann Async Promises ersetzen, um eine einfachere, lesbarere und elegantere Code-Struktur zu ermöglichen. Die gleiche Funktionalität kann mit Async wie folgt umstrukturiert werden:

const routes: Routes = [

Der wesentliche Unterschied zwischen diesem Async-basierten Code und dem vorherigen Promise-basierten besteht darin, dass die .then()-Methode entfällt. Dies wird erreicht, indem direkt der Rückgabewert von await import(…) verwendet und LazyLoadingModule in einer einzigen Zeile direkt referenziert wird, anstatt then() zu verwenden und LazyLoadingModule anzugeben.

Schritt 5: Konfigurieren der Route

Zum Abschluss konfigurieren wir die Route mit dem folgenden Code in der Datei user-dashboard-routing.module.ts.

Großartige Arbeit! Sie haben nun erfolgreich Lazy Loading in Ihrer Angular-App eingerichtet. Wann immer ein Nutzer eine Route aufruft, die das lazy geladene Modul benötigt, wird es genau dann geladen. Dies verbessert die anfängliche Ladezeit Ihrer App und macht sie effizienter.

IV. Best Practices für die Implementierung von Lazy Loading in Angular

Es gibt mehrere Möglichkeiten, Lazy Loading in Angular zu implementieren, hier sind die beliebtesten:

1. Modulorganisation

Organisieren Sie Ihre Anwendung in separate Module für jede Funktion, die Sie lazy loaden möchten. Diese Struktur stellt sicher, dass nur der notwendige Code bei Bedarf geladen wird, was die Leistung verbessert.

2. Routen-Konfiguration

Nutzen Sie die Methode loadChildren in Ihrer Routen-Konfiguration. Diese Methode ermöglicht es Angular, Module nur bei Bedarf zu laden, was die anfängliche Ladezeit der Anwendung erheblich reduziert.

3. Reduzierung der Bundle-Größe und Code-Splitting

Konzentrieren Sie sich darauf, die Größe Ihrer Bundles zu reduzieren und Ihren Code effektiv zu splitten. Dies kann durch Analyse Ihrer Bundles mit Tools wie dem Webpack Bundle Analyzer erreicht werden, um unnötigen Code und Abhängigkeiten zu identifizieren und zu eliminieren.

4. One Module Per Page Strategie

Verfolgen Sie eine Strategie, bei der jede Seite Ihrer Anwendung ihr eigenes Modul hat, bekannt als Feature-Modul. Dieser Ansatz vereinfacht die Struktur Ihrer Anwendung und verbessert die Ladeeffizienz, indem der für jede Seite benötigte Code isoliert wird.

5. Strategisches Preloading

Implementieren Sie strategisches Preloading von Modulen. Dabei werden bestimmte Module vorgeladen, die Nutzer voraussichtlich als Nächstes aufrufen, basierend auf ihrem Verhalten. Diese Strategie schafft ein Gleichgewicht zwischen sofortigem und Lazy Loading und verbessert die Benutzererfahrung, ohne die anfängliche Ladeleistung zu beeinträchtigen.

6. Regelmäßige Überprüfung und Optimierung

Überprüfen und optimieren Sie kontinuierlich die Struktur und das Ladeverhalten Ihrer Anwendung. Da Ihre Anwendung wächst und sich weiterentwickelt, sind regelmäßige Anpassungen und Optimierungen notwendig, um die durch Lazy Loading erzielten Leistungsverbesserungen zu erhalten und zu steigern.

Fazit

Zusammenfassend ist Lazy Loading in Angular ein Wendepunkt zur Verbesserung der Anwendungsleistung, insbesondere für SPAs. Es beschleunigt nicht nur die Ladezeiten und reduziert den Datenverbrauch, sondern optimiert auch die Nutzung der Browser-Ressourcen. Eine effektive Implementierung erfordert jedoch die Einhaltung bewährter Methoden wie Modulorganisation, Routen-Konfiguration und strategisches Preloading.

Für alle, die Lazy Loading in Angular nutzen oder bestehende Projekte optimieren möchten, bietet TECHVIFY professionelle Dienstleistungen an. Unser Team ist mit den besten Praktiken von Angular bestens vertraut und kann Ihnen helfen, die Effizienz und Benutzererfahrung Ihrer Anwendung zu maximieren. Kontaktieren Sie TECHVIFY für erstklassige Angular-Entwicklungs-Unterstützung.