Lazy loading for reducing initial bundle size in Angular

Introduction

Angular is a powerful front-end framework that allows developers to build feature-rich and complex web applications. As the application grows, the size of the initial bundle can increase significantly, affecting the application’s loading time. To address this issue, Angular offers lazy loading, a powerful technique that helps reduce the initial bundle size by loading specific modules only when they are required. In this blog, we will explore lazy loading in Angular, its benefits, and how to implement it with practical examples.

If you want to learn about the NGRX, state management angular, you can refer here.

Understanding Lazy Loading

Lazy loading is a technique that defers the loading of specific parts (modules) of the application until they are needed. By default, Angular loads all modules eagerly during the application startup, resulting in a large initial bundle. With this modules are split into separate bundles, and these bundles are loaded only when the user navigates to a specific route that requires the module.

Benefits of Lazy Loading

1. Reduced Initial Bundle Size: It reduces the size of the initial bundle, leading to faster loading times and improved application performance. Users will experience faster page loads and a more responsive user interface.
2. Faster Application Startup: By loading only the necessary modules, the application can start up more quickly, making it more user-friendly and efficient.
3. Improved Resource Efficiency: With lazy loading, users only download the modules they need, conserving bandwidth and optimizing resource usage.

Example: Implementing Lazy Loading in Angular

Let’s walk through an example of implementing lazy loading in an Angular application. So, we’ll assume you have a basic understanding of Angular and have already set up your Angular environment using Angular CLI.

Step 1: Create an Angular Application

Open your terminal and use the Angular CLI to create a new Angular application:

ng new lazy-loading-example
cd lazy-loading-example

Step 2: Create Feature Modules

So, For this example, let’s assume we have two feature modules: HomeModule and AdminModule. The HomeModule will be loaded eagerly, and the AdminModule will be lazy-loaded.

ng generate module home
ng generate module admin --route admin --module app.module

Step 3: Configure Lazy Loading

In the app-routing.module.ts, configure the routes to lazy-load the AdminModule.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 4: Create Components

Inside the home and admin feature modules, create components that will be used for their respective routes.

ng generate component home/home
ng generate component admin/dashboard

Step 5: Update Templates

In the home.component.html, add a link to the AdminModule to demonstrate it.

<h2>Welcome to the Home Page!</h2>
<p>
  <a routerLink="/admin">Go to Admin Dashboard (Lazy Loaded)</a>
</p>

Step 6: Serve the Application

Now, serve the application and navigate to the home page. Thus, we will see a link to the Admin Dashboard. When you click on the link, the AdminModule will be lazily loaded, and you will be redirected to the Admin Dashboard route.

ng serve

Conclusion

Lazy loading is a powerful technique in Angular for reducing the initial bundle size of your application. By deferring the loading of specific modules until they are required, you can significantly improve the loading time and overall performance of your Angular application.

In this blog, we explored the benefits of lazy loading and implemented it with a practical example. By using lazy loading for feature modules, you can create more efficient and user-friendly web applications. As your application grows, consider applying it to additional feature modules to further optimize performance. Happy coding with lazy loading in Angular!

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.