© skyNext/Shutterstock.com, © Vova_31/Shutterstock.com, © S&S Media
Windows Developer
Wenn du in Eile bist, sei faul: Optimieren mit Lazy Loading

Langsam ist schneller

Dank Lazy Loading muss eine Angular-Anwendung ihre Module erst bei Bedarf laden. Das verbessert die Startgeschwindigkeit. Zum Kompensieren des dadurch entstehenden Mehraufwands zur Laufzeit kümmert sich Preloading im Hintergrund ums Laden dieser Module nach dem Programmstart.

Manfred Steyer


Um die Performance einer Anwendung zu optimieren, gibt es ein paar Quick Wins. Darunter fällt Bundling, Minification, aber auch das Aktivieren des Produktionsmodus von Angular. Die gute Nachricht: Das Angular CLI kümmert sich darum und um noch viel mehr automatisch, wenn es einen Production Build erzeugt. Um diesen zu bekommen, genügt ein einfaches ng build --prod.

Daneben bringt Angular noch ein paar weitere Hebel zur Verbesserung der Performance mit. Einen, der sich bei großen Unternehmensanwendungen bewährt hat, möchte ich heute vorstellen. Die Rede ist von Lazy Loading. Wie immer stelle ich das zur Veranschaulichung genutzte Beispiel über mein GitHub-Konto [1] zur Verfügung.

Lazy Loading konfigurieren

Standardmäßig lädt der Browser alle Angular-Module, bevor der Benutzer die Arbeit damit aufnehmen kann. Darunter befinden sich natürlich auch einige, die nicht oder zumindest nicht sofort benötigt werden. Genau hier setzt Lazy Loading zur Optimierung der Startgeschwindigkeit an: Es sorgt dafür, dass zunächst nur die wichtigsten Anwendungsbestandteile im Browser landen, und der Rest wird später bei Bedarf angefordert. Hierfür kommen einfach Routen mit der Eigenschaft loadChildren zum Einsatz (Listing 1).

Listing 1: „loadChildren“let APP_ROUTES: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flight-booking', loadChildren: './flight-booking/flight-booking.module#FlightBookingModule' }, […]}

Die Eigenschaft loadChildren verweist auf einen String, der zwei durch eine Raute getrennte Informationen erhält. Der erste Teil benennt die Datei, in der sich das bei Bedarf zu ladende Modul befindet, der zweite Teil gibt Auskunft über den Namen der Modulklasse.

Damit Lazy Loading funktioniert, ist darauf zu achten, dass kein anderer Teil der Anwendung das FlightBookingModul direkt referenziert. Die meisten Build-Tools würden solchen Referenzen nämlich folgen und das so entdeckte Modul ins aktuelle Bundle aufnehmen. Wenn aber alles im selben Bundle landet, wird die Idee von Lazy Loading ad absurdum geführt. Aus diesem Grund darf selbst das AppModule die mit loadChildren angegebenen Module nicht mehr importieren (Listing 2).

Listing 2: „AppModule“@NgModule({ imports: [ BrowserModule, HttpModule, FormsModule, […], // FlightBookingModule //

Darüber hinaus ist beim Einsatz von Shared Modules zu bea...

Windows Developer
Wenn du in Eile bist, sei faul: Optimieren mit Lazy Loading

Langsam ist schneller

Dank Lazy Loading muss eine Angular-Anwendung ihre Module erst bei Bedarf laden. Das verbessert die Startgeschwindigkeit. Zum Kompensieren des dadurch entstehenden Mehraufwands zur Laufzeit kümmert sich Preloading im Hintergrund ums Laden dieser Module nach dem Programmstart.

Manfred Steyer


Um die Performance einer Anwendung zu optimieren, gibt es ein paar Quick Wins. Darunter fällt Bundling, Minification, aber auch das Aktivieren des Produktionsmodus von Angular. Die gute Nachricht: Das Angular CLI kümmert sich darum und um noch viel mehr automatisch, wenn es einen Production Build erzeugt. Um diesen zu bekommen, genügt ein einfaches ng build --prod.

Daneben bringt Angular noch ein paar weitere Hebel zur Verbesserung der Performance mit. Einen, der sich bei großen Unternehmensanwendungen bewährt hat, möchte ich heute vorstellen. Die Rede ist von Lazy Loading. Wie immer stelle ich das zur Veranschaulichung genutzte Beispiel über mein GitHub-Konto [1] zur Verfügung.

Lazy Loading konfigurieren

Standardmäßig lädt der Browser alle Angular-Module, bevor der Benutzer die Arbeit damit aufnehmen kann. Darunter befinden sich natürlich auch einige, die nicht oder zumindest nicht sofort benötigt werden. Genau hier setzt Lazy Loading zur Optimierung der Startgeschwindigkeit an: Es sorgt dafür, dass zunächst nur die wichtigsten Anwendungsbestandteile im Browser landen, und der Rest wird später bei Bedarf angefordert. Hierfür kommen einfach Routen mit der Eigenschaft loadChildren zum Einsatz (Listing 1).

Listing 1: „loadChildren“let APP_ROUTES: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flight-booking', loadChildren: './flight-booking/flight-booking.module#FlightBookingModule' }, […]}

Die Eigenschaft loadChildren verweist auf einen String, der zwei durch eine Raute getrennte Informationen erhält. Der erste Teil benennt die Datei, in der sich das bei Bedarf zu ladende Modul befindet, der zweite Teil gibt Auskunft über den Namen der Modulklasse.

Damit Lazy Loading funktioniert, ist darauf zu achten, dass kein anderer Teil der Anwendung das FlightBookingModul direkt referenziert. Die meisten Build-Tools würden solchen Referenzen nämlich folgen und das so entdeckte Modul ins aktuelle Bundle aufnehmen. Wenn aber alles im selben Bundle landet, wird die Idee von Lazy Loading ad absurdum geführt. Aus diesem Grund darf selbst das AppModule die mit loadChildren angegebenen Module nicht mehr importieren (Listing 2).

Listing 2: „AppModule“@NgModule({ imports: [ BrowserModule, HttpModule, FormsModule, […], // FlightBookingModule //

Darüber hinaus ist beim Einsatz von Shared Modules zu bea...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang