Improving Start-up Performance with Lazy Loading in Angular 2

Improving Start-up Performance with Lazy Loading in Angular 2

Slides from talk at ngbe in Belgium, 2016

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

December 09, 2016
Tweet

Transcript

  1. Improving Start-up Performance with Lazy Loading in Angular 2 Manfred

    Steyer SOFTWAREarchitekt.at ManfredSteyer
  2. About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer

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

    • Shared Modules and Lazy Loading Page  3
  4. Lazy Loading Page  4

  5. Module Structure Page  5 AppModule … … … SharedModule

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

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

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

    [ { path: '/bookings', component: FlightBookingComponent, […] }, […] } Url: /flights/bookings Triggers Lazy Loading
  9. webpack configuration • angular2-router-loader • splits bundle into several chunks

    Page  9
  10. DEMO Page  10

  11. Prevent Lazy-Loading

  12. Guards • Services that can intercept routing • Can prevent

    requested action
  13. Base Types for Guards CanActivate CanActivateChild CanDeactivate CanLoad

  14. Sample @Injectable() export class AuthLoadGuard implements CanLoad { canLoad(route: Route):

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

    'flight-booking', loadChildren: ‚[…]', canLoad: [AuthLoadGuard] }, […] } Just a Token // Your Module providers: [ { provide: AuthLoadGuard, useClass: AuthLoadGuard} ],
  16. Caution • This has nothing to do with security •

    It’s about usability
  17. DEMO

  18. Preloading Page  18

  19. Idea • Modules that might be needed later are loaded

    after (!) the start of the application • When the module is actually needed later, it is available immediately Page  19
  20. Activating Preloading Page  20 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG,

    { preloadingStrategy: PreloadAllModules });
  21. DEMO Page  21

  22. Lazy Loading and Shared Modules Page  22

  23. DEMO Page  23

  24. Lazy Loading and Shared Modules Page  24 AppModule FlightModule

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

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

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

    includes (lazy) includes (without Providers) AuthService
  28. Shared Module Page  28 @NgModule({ […], providers: [] })

    export class SharedModule { }
  29. Shared Module Page  29 @NgModule({ […], providers: [] })

    export class SharedModule { static forRoot(): ModuleWithProviders { return { ngModule: SharedModule, providers: [AuthService, […]] } } }
  30. DEMO Page  30

  31. Summary Page  31 Lazy Loading of Modules webpack splits

    bundle Prevent Lazy Loading with Guards Preloading Strategy Shared Modules w/ and w/o Providers Lots of lazy animals on the web ;-)
  32. Contact [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer