NG Srilanka - Improving Startup Performance with Angular Lazy Loading

I've presented this talk at NG-Sri Lanka, first-ever Angular Conference of Sri Lanka. It contains different application loading techniques like Eager Loading, Lazy Loading.

How does preloading help and how we can create custom preloading strategy?

Transcript

1. IMPROVING STARTUP PERFORMANCE WITH LAZY LOADING SRASHTI JAIN HVANTAGE TECHNOLOGIES @srashtisj #ngsrilanka #ngsl #ngsl2019
5. Content 5 » Custom Preloading Strategy » Eager Loading » Lazy Loading » Preloading
6. Eager LOADING 6
7. 7 Angular binds all module in same bundle main.js
8. Module Structure 8 AppModule FeatureModule1 FeatureModule2 ... SharedModule
9. Demo
10. 10 const routes: Routes = [ { path: 'user', component: UserComponent, pathMatch: 'full' }, { path: 'payment', component: PaymentComponent, pathMatch: 'full' }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })
11. 11 LAZY LOADING
12. “Lazy loading is a technique for loading web content when it's needed rather than all at once” 12
13. 13 Separate chunk is created for every lazily loaded module and then It will be loaded on demand
14. Module Structure 14 AppModule FeatureModule1 FeatureModule2 ... SharedModule
16. 16 const routes: Routes = [ { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }, { path: 'payment', loadChildren: () => import('./payment/payment.module').then(m => m.PaymentModule) } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })
17. Demo
19. Lazy Loading 19 » Lazy Loading: Loading it later (on Demand) » Better Startup Performance » Delay during execution for loading on demand
21. PRE LOADING 21
22. “Preloading modules in Angular is very similar to lazy loading, with the exception that the modules will be loaded immediately after all the eager loaded modules are ready” 22
23. Preloading 23 » The modules which might be needed later - are loaded after the application starts » When the module is actually needed, it’s available immediately
24. Preloading Strategies 24 » NoPreloading » PreloadAllModules
25. 25 Separate chunk is created for every lazily loaded module and it will starts loading after all eagerly loaded modules are loaded
26. Demo
27. 27 const routes: Routes = [ { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }, { path: 'payment', loadChildren: () => import('./payment/payment.module').then(m => m.PaymentModule) } ]; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: NoPreloading })], exports: [RouterModule] })
28. 28 const routes: Routes = [ { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }, { path: 'payment', loadChildren: () => import('./payment/payment.module').then(m => m.PaymentModule) } ]; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })], exports: [RouterModule] })
29. Custom Preloading Strategy 29
30. Why do we need Custom Preloading? 30
31. 31 Separate chunk is created for every lazily loaded module and we can define which module we want to preload
32. Lazy Loading Pre Loading Custom Pre Loading Strategy 32
34. PROCESS IS TOO EASY Create a Service Implement Preloading Strategy into the Service Implement preload method 34
35. Demo
36. 36 export class CustomLoadingService implements PreloadingStrategy { preload(route: Route, fn: () => Observable<any>): Observable<any> { if (route.data && route.data['preload']) { return fn(); } return of(null); } constructor() { } }
37. 37 const routes: Routes = [ { path: 'user', data: { preload: true }, loadChildren: () => import('./user/user.module').then(m => m.UserModule) }, { path: 'payment', loadChildren: () => import('./payment/payment.module').then(m => m.PaymentModule) } ]; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingService })], exports: [RouterModule] })
38. THANK YOU @srashtisj @srashtisj