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

Talk from Meetup at Angular Munich, Jan 2017

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 • Preloading • Prevent Lazy Loading • 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 • creates several chunks Page  9
10. DEMO Page  10
11. Preloading Page  11
12. 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
13. Activating Preloading Page  13 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
14. DEMO Page  14
15. Prevent Lazy-Loading
16. Guards • Services that can intercept routing • Can prevent requested action
17. Base Types for Guards CanActivate CanActivateChild CanDeactivate CanLoad
18. Sample @Injectable() export class AuthLoadGuard implements CanLoad { canLoad(route: Route): Observale<boolean> | Promise<boolean> | boolean { return true; } }
19. Configure a Guard let APP_ROUTES: Routes = [ { path: 'flight-booking', loadChildren: '[…]', canLoad: [AuthLoadGuard] }, […] } Just a Token // Your Module providers: [ { provide: AuthLoadGuard, useClass: AuthLoadGuard} ],
20. Caution • This has nothing to do with security • It’s about usability
21. DEMO
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 (lazy) includes CoreModule includes includes Only import CoreModule into AppModule! Global Providers like AuthService & Shell
28. DEMO
29. Huge CoreModule? Page  29 AppModule FlightModule SharedModule includes (lazy) includes CoreModule includes includes
30. Solution (for Libraries) Page  30 AppModule FlightModule AuthModule includes (lazy) CoreModule
31. Solution (for Libraries) Page  31 AppModule FlightModule AuthModule includes (lazy) includes (with Services) CoreModule includes includes (without Services)
32. Auth Module Page  32 @NgModule({ […], providers: [] }) export class AuthModule { }
33. Auth Module Page  33 @NgModule({ […], providers: [] }) export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
34. DEMO Page  34
35. 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
36. Contact [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer