Lazy Loading von Modulen

Lazy Loading verbessert die Performance, indem Module erst geladen werden, wenn sie benötigt werden. Sehen wir uns dieses wichtige Angular-Feature an.

Was ist Lazy Loading?

Lazy Loading bedeutet, Module asynchron zu laden, wenn ein Benutzer zu einer bestimmten Route navigiert, anstatt beim Start der App alle Module zu laden.

Warum Lazy Loading verwenden?

• Verkürzt die anfängliche Ladezeit
• Verbessert die Performance
• Optimiert die Ressourcennutzung

Erstellen eines Lazy-Loaded-Moduls

Erstellen Sie mit Angular CLI ein Feature-Modul für das Lazy Loading:

ng generate module admin --route admin --module app.module

Lazy Routes konfigurieren

Richten Sie Lazy Loading in Ihrem Routing-Modul ein:

{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

Lazy Loading testen

Verwenden Sie die Entwicklertools, um zu bestätigen, dass Module erst geladen werden, wenn die entsprechenden Routen aktiviert werden. Sie sehen, wie neue JS-Dateien dynamisch geladen werden.

Preloading-Strategien

Angular ermöglicht das Preloading von Lazy-Loaded-Modulen, um die Navigationsgeschwindigkeit weiter zu verbessern. Häufig verwendete Strategien sind:

• Kein Preloading (Standard)
• Alle Module vorladen

Best Practices für Lazy Loading

Verwenden Sie Lazy Loading für Module, die beim Start der Anwendung nicht sofort benötigt werden, beispielsweise Admin-Dashboards oder Einstellungsseiten.

Zusammenfassung

Sie haben erfolgreich gelernt, wie Sie Lazy Loading implementieren, um die Performance Ihrer Angular-Anwendung zu verbessern. Gute Arbeit!