Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LazyLoading.pdf

Manfred Steyer
November 24, 2016
42

 LazyLoading.pdf

Manfred Steyer

November 24, 2016
Tweet

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. 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' } ];
  3. 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
  4. 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 });
  5. 8 DEMO Page  15 Lazy Loading und Shared Modules

    Page  16 AppModule FlugModule SharedModule includes includes (lazy) includes
  6. 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
  7. 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, […]] } } }
  8. 11 DEMO Page  21 Zusammenfassung Page  22 Lazy

    Loading von Modulen webpack splittet Bundle Preloading Strategy Shared Modules mit und ohne Provider