Improving Start-up Performance with Lazy Loading in Angular 2

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