DEV Community

Cover image for Boost Angular’s performance by Lazy Loading your Modules 🚀
Muhammad Awais
Muhammad Awais

Posted on

Boost Angular’s performance by Lazy Loading your Modules 🚀

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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

module directory

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

// from
import { HomeComponent } from './home/home.component';
// to
import { HomeComponent } from './home.component';
Enter fullscreen mode Exit fullscreen mode

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
  }
];
Enter fullscreen mode Exit fullscreen mode

👉 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)
  },
];
Enter fullscreen mode Exit fullscreen mode

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

💻 Source Code:

GitHub logo gdgsoweto / angular-lazy-loading

Boost Angular’s performance by Lazy Loading your Modules, #gdg #gdgsoweto

AngularLazyLoading

This project was generated with Angular CLI version 8.2.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Adding Bootstrap in App

npm install bootstrap@latest

Add a css adding line in your scripts array under angular.json…

Discussion (0)