Improving Start-up Performance with Lazy Loading in Angular

Slide 1

Slide 1 text

Improving Start-up Performance with Lazy Loading in Angular Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

Slide 2

Slide 2 text

About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer

Slide 3

Slide 3 text

Contents • Lazy Loading and Preloading • Shared Modules and Lazy Loading Page ▪ 3

Slide 4

Slide 4 text

Lazy Loading Page ▪ 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Root Module with Lazy Loading Page ▪ 7 const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]booking.module#BookingModule' } ];

Slide 8

Slide 8 text

Routes for Feature Module Page ▪ 8 const FLIGHT_ROUTES = [ { path: '', component: FlightBookingComponent, […] }, […] }

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Two Sides of a Coin

Slide 11

Slide 11 text

Lazy Loading • Lazy Loading means: Loading it later • Better startup performance • Delay during execution for loading on demand

Slide 12

Slide 12 text

Preloading Page ▪ 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Activating Preloading Page ▪ 14 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });

Slide 15

Slide 15 text

DEMO Page ▪ 15

Slide 16

Slide 16 text

Lazy Loading and Shared Modules Page ▪ 16

Slide 17

Slide 17 text

Lazy Loading and Shared Modules Page ▪ 18 AppModule FlightModule SharedModule includes includes (lazy) includes AuthService

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Solution Page ▪ 21 AppModule FlightModule SharedModule includes (lazy) CoreModule includes includes Only import CoreModule into AppModule! Global Providers like AuthService

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Solution (for Libraries) Page ▪ 23 AppModule FlightModule AuthModule includes (lazy) CoreModule includes

Slide 23

Slide 23 text

Solution (for Libraries) Page ▪ 24 AppModule FlightModule AuthModule includes (lazy) includes (with Services) CoreModule includes includes (without Services)

Slide 24

Slide 24 text

Auth Module Page ▪ 25 @NgModule({ […], providers: [] }) export class AuthModule { }

Slide 25

Slide 25 text

Auth Module Page ▪ 26 @NgModule({ […], providers: [] }) export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }

Slide 26

Slide 26 text

Importing into AppModule @NgModule({ imports: [ AuthModule.forRoot() [...] ], declarations: [ ... ], bootstrap: [ ... ] }) export class AppModule { }

Slide 27

Slide 27 text

Importing into other Modules @NgModule({ imports: [ AuthModule [...] ], declarations: [ ... ], bootstrap: [ ... ] }) export class OtherModule { }

Slide 28

Slide 28 text

DEMO Page ▪ 29

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Contact [mail] ms@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer