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

Improving Start-up Performance with Lazy Loading in Angular 2 (Jan 2017)

Improving Start-up Performance with Lazy Loading in Angular 2 (Jan 2017)

Talk from Meetup at Angular Munich, Jan 2017

Manfred Steyer

January 31, 2017
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer

    & Consultant • Focus: Angular • Google Developer Expert (GDE) Page  2 Manfred Steyer
  2. Contents • Lazy Loading • Preloading • Prevent Lazy Loading

    • Shared Modules and Lazy Loading Page  3
  3. Module Structure Page  5 AppModule … … … SharedModule

    Root Module Feature Modules Shared Module
  4. Lazy Loading Page  6 AppModule … … … SharedModule

    Root Module Feature Modules Shared Module
  5. Root Module with Lazy Loading Page  7 const APP_ROUTE_CONFIG:

    Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
  6. Routes for Feature Module Page  8 const FLIGHT_ROUTES =

    [ { path: '/bookings', component: FlightBookingComponent, […] }, […] } Url: /flights/bookings Triggers Lazy Loading
  7. Idea • Modules that might be needed later are loaded

    after (!) the start of the application • When the module is actually needed, it is available immediately Page  12
  8. Sample @Injectable() export class AuthLoadGuard implements CanLoad { canLoad(route: Route):

    Observale<boolean> | Promise<boolean> | boolean { return true; } }
  9. Configure a Guard let APP_ROUTES: Routes = [ { path:

    'flight-booking', loadChildren: '[…]', canLoad: [AuthLoadGuard] }, […] } Just a Token // Your Module providers: [ { provide: AuthLoadGuard, useClass: AuthLoadGuard} ],
  10. Lazy Loading and Shared Modules Page  24 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService
  11. Lazy Loading and Shared Modules Page  25 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService AuthService
  12. Lazy Loading and Shared Modules Page  26 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService AuthService
  13. Solution Page  27 AppModule FlightModule SharedModule includes (lazy) includes

    CoreModule includes includes Only import CoreModule into AppModule! Global Providers like AuthService & Shell
  14. Solution (for Libraries) Page  31 AppModule FlightModule AuthModule includes

    (lazy) includes (with Services) CoreModule includes includes (without Services)
  15. Auth Module Page  33 @NgModule({ […], providers: [] })

    export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
  16. Summary Page  35 Lazy Loading of Modules webpack splits

    chunks Prevent Lazy Loading with Guards Preloading Strategy Use Core Module for global Services Shared Modules w/ and w/o Providers