How to implement Lazy Loading?

Anil Kumar
Mar 5, 2024

--

In Angular be default all module loads eagerly. but for optimising the performance we can set mechanism to load module which are needed immediately is called lazy loading. for enterprise/large application is needed with lazy loading. it reduce initial bundle size and runs faster.

Steps.

  1. Divide into further modules
  2. Creating routing for feature module with lazy loading format
  3. inject routing module in main feature module.
  4. then feature module in main module with Child.
const appRoutes = [ 
{ path: 'dashboard',
loadChildren:() => import('./feature/feature.module').then(m=>m.FeatureModule)
}

Use Case:

  1. Create pre and post login modules
  2. Feature modules- E-commerce sale module vs inventory module
  3. Common Functionality

--

--

Anil Kumar
Anil Kumar

Written by Anil Kumar

Software Engineer| Angular Advocate | Cyclist

No responses yet