LazyLoading.pdf

Transcript

1. 1 Lazy Loading und Preloading mit Angular 2 Manfred Steyer ManfredSteyer Über mich …  Manfred Steyer  SOFTWAREarchitekt.at  Trainer & Consultant  Google Developer Expert  Fokus: Angular Page  2 ManfredSteyer
2. 2 Inhalt Lazy Loading Preloading Nutzung von Shared Modules Page  3 LAZY LOADING Page  4
3. 3 Modul-Struktur Page  5 AppModule … … … SharedModule Root Module Feature Modules Shared Module Root Module mit Lazy Loading Page  6 const APP_ROUTE_CONFIG: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
4. 4 Routen für Feature Module Page  7 const FLUG_ROUTES = [ { path: '', component: FlugBuchenComponent, […] }, […] } Konfiguration von Webpack angular2-router-loader Splittet Bundle in mehrere Teile Page  8
5. 5 DEMO Page  9 PRELOADING Page  10
6. 6 Idee Eventuell später benötigte Module werden nach (!) Anwendungsstart geladen Wird das Modul später tatsächlich benötigt, steht es augenblicklich zur Verfügung Page  11 Preloading aktivieren Page  12 export const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
7. 7 DEMO Page  13 LAZY LOADING UND SHARED SERVICES Page  14
8. 8 DEMO Page  15 Lazy Loading und Shared Modules Page  16 AppModule FlugModule SharedModule includes includes (lazy) includes
9. 9 Lazy Loading und Shared Modules Page  17 AppModule FlugModule SharedModule includes includes (lazy) includes AuthService AuthService Lösung Page  18 AppModule FlugModule SharedModule includes (inkl. Provider) includes (lazy) includes (exkl. Provider) AuthService
10. 10 Shared Module Page  19 @NgModule({ […], providers: [] }) export class SharedModule { } Shared Module Page  20 @NgModule({ […], providers: [] }) export class SharedModule { static forRoot(): ModuleWithProviders { return { ngModule: SharedModule, providers: [AuthService, […]] } } }
11. 11 DEMO Page  21 Zusammenfassung Page  22 Lazy Loading von Modulen webpack splittet Bundle Preloading Strategy Shared Modules mit und ohne Provider
12. 12 [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer Kontakt