Lazy Loading in Angular, ng-nl 2017

Transcript

1. 3/16/2017 1 Improving Start-up Performance with Lazy Loading in Angular Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
2. 3/16/2017 2 Contents • Lazy Loading • Preloading • Shared Modules and Lazy Loading Page ▪ 3 Lazy Loading Page ▪ 4
3. 3/16/2017 3 Module Structure Page ▪ 5 AppModule … … … SharedModule Root Module Feature Modules Shared Module Lazy Loading Page ▪ 6 AppModule … … … SharedModule Root Module Feature Modules Shared Module
4. 3/16/2017 4 Root Module with Lazy Loading Page ▪ 7 const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ]; Routes for Feature Module Page ▪ 8 const FLIGHT_ROUTES = [ { path: '/bookings', component: FlightBookingComponent, […] }, […] } Url: /flights/bookings Triggers Lazy Loading
5. 3/16/2017 5 webpack configuration • angular2-router-loader • creates several chunks Page ▪ 9 DEMO Page ▪ 10
6. 3/16/2017 6 Preloading Page ▪ 11 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
7. 3/16/2017 7 Activating Preloading Page ▪ 13 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules }); DEMO Page ▪ 14
8. 3/16/2017 8 Lazy Loading and Shared Modules Page ▪ 22 DEMO Page ▪ 23
9. 3/16/2017 9 Lazy Loading and Shared Modules Page ▪ 24 AppModule FlightModule SharedModule includes includes (lazy) includes AuthService Lazy Loading and Shared Modules Page ▪ 25 AppModule FlightModule SharedModule includes includes (lazy) includes AuthService AuthService
10. 3/16/2017 10 Lazy Loading and Shared Modules Page ▪ 26 AppModule FlightModule SharedModule includes includes (lazy) includes AuthService AuthService Solution Page ▪ 27 AppModule FlightModule SharedModule includes (lazy) CoreModule includes includes Only import CoreModule into AppModule! Global Providers like AuthService
11. 3/16/2017 11 DEMO Huge CoreModule? Page ▪ 29 AppModule FlightModule SharedModule includes (lazy) CoreModule includes includes
12. 3/16/2017 12 Solution (for Libraries) Page ▪ 30 AppModule FlightModule AuthModule includes (lazy) CoreModule Solution (for Libraries) Page ▪ 31 AppModule FlightModule AuthModule includes (lazy) includes (with Services) CoreModule includes includes (without Services)
13. 3/16/2017 13 Auth Module Page ▪ 32 @NgModule({ […], providers: [] }) export class AuthModule { } Auth Module Page ▪ 33 @NgModule({ […], providers: [] }) export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
14. 3/16/2017 14 DEMO Page ▪ 34 Summary Page ▪ 35 Lazy Loading of Modules webpack splits chunks Preloading Strategy Use Core Module for global Services Shared Modules w/ and w/o Providers
15. 3/16/2017 15 Contact [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer