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

Improving Start-up Performance with Lazy Loadin...

Improving Start-up Performance with Lazy Loading in Angular

Talk from ng-conf 2017, April 2017 in Salt Lake City

Avatar for Manfred Steyer

Manfred Steyer

April 06, 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. Root Module with Lazy Loading Page ▪ 7 const APP_ROUTE_CONFIG:

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

    [ { path: '', component: FlightBookingComponent, […] }, […] }
  4. Build Configuration • Angular CLI: Done! • ngtools/webpack • Webpack

    • ngtools/webpack • Big thanks to the CLI-Team • Or: angular-router-loader • Big thanks to Brandon Roberts Page ▪ 9
  5. Lazy Loading • Lazy Loading means: Loading it later •

    Better startup performance • Delay during execution for loading on demand
  6. 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 ▪ 13
  7. Lazy Loading and Shared Modules Page ▪ 18 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService
  8. Lazy Loading and Shared Modules Page ▪ 19 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService AuthService
  9. Lazy Loading and Shared Modules Page ▪ 20 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService AuthService
  10. Solution Page ▪ 21 AppModule FlightModule SharedModule includes (lazy) CoreModule

    includes includes Only import CoreModule into AppModule! Global Providers like AuthService
  11. Solution (for Libraries) Page ▪ 24 AppModule FlightModule AuthModule includes

    (lazy) includes (with Services) CoreModule includes includes (without Services)
  12. Auth Module Page ▪ 26 @NgModule({ […], providers: [] })

    export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
  13. Importing into other Modules @NgModule({ imports: [ AuthModule [...] ],

    declarations: [ ... ], bootstrap: [ ... ] }) export class OtherModule { }
  14. Summary Page ▪ 30 Lazy Loading: Startup Performance CLI/ webpack

    splits chunks Preloading Strategy Use Core Module for global Services Shared Modules w/ and w/o Providers