Improving Start-up Performance with Lazy Loading in Angular

Transcript

1. Improving Start-up Performance with Lazy Loading in Angular 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 and Preloading • Shared Modules and

   Lazy Loading Page ▪ 3

4. Lazy Loading Page ▪ 4

5. Module Structure Page ▪ 5 AppModule FeatureModule1 FeatureModule2 … SharedModule

   SharedModule SharedModule

6. Module Structure Page ▪ 6 AppModule FeatureModule1 FeatureModule2 … SharedModule

   SharedModule SharedModule

7. Root Module with Lazy Loading Page ▪ 7 const APP_ROUTE_CONFIG:

   Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]booking.module#BookingModule' } ];

8. Routes for Feature Module Page ▪ 8 const FLIGHT_ROUTES =

   [ { path: '', component: FlightBookingComponent, […] }, […] }

9. 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

10. Two Sides of a Coin

11. Lazy Loading • Lazy Loading means: Loading it later •

    Better startup performance • Delay during execution for loading on demand

12. Preloading Page ▪ 12

13. 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

14. Activating Preloading Page ▪ 14 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG,

    { preloadingStrategy: PreloadAllModules });

15. DEMO Page ▪ 15

16. Lazy Loading and Shared Modules Page ▪ 16

17. Lazy Loading and Shared Modules Page ▪ 18 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService

18. Lazy Loading and Shared Modules Page ▪ 19 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService AuthService

19. Lazy Loading and Shared Modules Page ▪ 20 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService AuthService

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

    includes includes Only import CoreModule into AppModule! Global Providers like AuthService

21. Huge CoreModule? Page ▪ 22 AppModule FlightModule SharedModule includes (lazy)

    CoreModule includes includes

22. Solution (for Libraries) Page ▪ 23 AppModule FlightModule AuthModule includes

    (lazy) CoreModule includes

23. Solution (for Libraries) Page ▪ 24 AppModule FlightModule AuthModule includes

    (lazy) includes (with Services) CoreModule includes includes (without Services)

24. Auth Module Page ▪ 25 @NgModule({ […], providers: [] })

    export class AuthModule { }

25. Auth Module Page ▪ 26 @NgModule({ […], providers: [] })

    export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }

26. Importing into AppModule @NgModule({ imports: [ AuthModule.forRoot() [...] ], declarations:

    [ ... ], bootstrap: [ ... ] }) export class AppModule { }

27. Importing into other Modules @NgModule({ imports: [ AuthModule [...] ],

    declarations: [ ... ], bootstrap: [ ... ] }) export class OtherModule { }

28. DEMO Page ▪ 29

29. 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

30. Contact [mail] [email protected] [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer