DEV Community

Muhammad Awais

Posted on Nov 27, 2020

Boost Angular’s performance by Lazy Loading your Modules 🚀

#angular #typescript #javascript #es6

Building a large scale application involves meticulous details that should not be ignored. These applications usually contain a large number of feature modules. However, all these feature modules are not required to be loaded all at once.

Loading only the necessary modules at the initial load not only reduces the bundle size but also decreases load time. This design pattern is called lazy loading, and, as said, it loads the app modules only when it is necessary. Ideally, for an application to be successful, the initial load time should be short. For that, it is recommended to lazy load the components that are not necessary at first.

1. Generate some new modules inside your /app:

ng g m home --routing
ng g m auth --routing

2. Generate root components for your modules inside newly created modules directories /homepage, /auth:

ng g c home // (inside homepage newly created module)
ng g c auth // (inside auth newly created module)

3. take out component files from components directory to root of the module directory, so that your module directory will look like this:

4. update you path in "homepage.module.ts" file

// from
import { HomeComponent } from './home/home.component';
// to
import { HomeComponent } from './home.component';

5. Add initial route of your module so that the redirection call of your module with directed to the root component of your module:

// home-routing.module.ts
import { HomeComponent } from './home.component';

const routes: Routes = [
  { 
    path: '', 
    component: HomeComponent
  }
];

👉 Note: repeat steps 4, 5 for the auth module as well.

6. Now add the lazy-loaded route of your module inside the app module:

// app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule)
  },
  {
    path: 'auth',
    loadChildren: () => import('./pages/auth/auth.module').then((m) => m.AuthModule)
  },
];

That's it, now run your app in the browser and see the difference in your network tab of dev tools 😃

💻 Source Code:

gdgsoweto / angular-lazy-loading