What is Lazy Loading?
Lazy loading is a process of loading components, modules or other assets of a website as required. Since, Angular creates a SPA (Single Page Application), all of its components are loaded, at once. Secondly, a lot of unnecessary libraries or modules might be loaded as well.
For a small application it would be okay, but as the application grows the load time will increase, if everything is loaded at once. Lazy loading allows Angular to load components and modules as and when needed.
First of all, to understand how lazy loading works in Angular, we need to understand the basic building blocks of the framework: NgModules.
In order to understand how Lazy Loading works we first need to understand the building block of Angular: NgModules.
What are NgModules?
Angular libraries like RouterModule, BrowserModule, FormsModule are NgModules. Angular Material, which is a 3rd party, is also a type of NgModule. NgModule consists of files & code related to a specific domain or having a similar set of functionalities.
A typical NgModule file declares components, directives, pipes, and services. It can also import other modules that are needed in the current module.
One of the important advantage of NgModules is they can be lazy loaded. Let's have a look at how we can configure lazy loading.
How to Create NgModules
In this tutorial, we will create two modules Module A and Module B which will be lazy loaded. On the main screen we will have two buttons for loading each module lazily.
Create a Project
Create a new Angular project lazy-load-demo by executing the below command.
ng new lazy-load-demo
code lazy-load-demo
Here, we are creating a new project with routing. Secondly, the strict mode is enabled. Lastly, we are mentioning the stylesheet format to css. The second command opens your project in VS Code.
Root Module
By default, a root module or app module is created under /src/app. Below is the NgModule file created:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
First, we are importing all the required modules and components.
After that, @NgModule decorator states that AppModule class is a type of NgModule. The decorator accepts declarations, imports, providers, and bootstrap. Here are the descriptions for each of them:
- declarations: The components in this module.
- imports: The modules that are required by the current module.
- providers: The service providers if any.
- bootstrap: The root component that Angular creates and inserts into the
index.html host web page.
Main screen
The main screen will have 2 buttons, namely, Load Module A & Load Module B. As the name suggests, clicking these buttons will lazily load each module.
For that, replace your app.component.html file with the contents below:
<button style="padding: 20px; color: white; background-color: green;" routerLink="a">Load Module A</button>
<button style="padding: 20px; color: white; background-color: blue;" routerLink="b">Load Module B</button>
<router-outlet></router-outlet>
Let's define the modules for routes a & b.
Lazy Loaded Modules
In order to create lazy loaded modules execute the below commands.
ng generate module modulea --route a --module app.module
ng generate module moduleb --route b --module app.module
The commands will generate two folders modulea & moduleb. Subsequently, each folder will contain their own module.ts, routing.ts and component files.
If you check your app-routing.module.ts you will see the below code for routes.
const routes: Routes = [
{ path: 'a', loadChildren: () => import('./modulea/modulea.module').then(m => m.ModuleaModule) },
{ path: 'b', loadChildren: () => import('./moduleb/moduleb.module').then(m => m.ModulebModule) }
];
It implies that when route a or b is visited load their respective modules lazily.
On running the project with ng serve, you will see the below screen:
Home Page
On clicking Load Module A button, you will be routed to page a. This is how your screen should look like.
Lazily loaded Module A
You should see a similar screen that says moduleb works! when clicked on Load Module B.
How to Verify that the Lazy Loading Worked
In order to verify the files loaded, open the developer tools by pressing F12. After that, visit the Network tab as you can see in the screenshot below. When you refresh the page it will show few files requested.
Network Tab
Go ahead and clear your list of requests by hitting the clear button as shown in the image on the right
When you click on the Load Module A, you will see a request for modulea-modulea-module.js as in the screenshot below. This verifies that the Module A was lazily loaded.
Module A Loaded
Similarly, when you click Load Module B, the moduleb-moduleb-module.js file is loaded. Hence, verifying that Module B was loaded lazily.
Module B Loaded
Use Cases
As we have seen, it’s very easy to create lazy loading modules. There are lots of use cases where they are useful, such as
- Creating a separate module for pre-login vs post-login screens.
- For an e-commerce website, vendor facing vs customer facing screens can belong to separate modules. You can also create a separate module for payment.
- A separate CommonModule which contains shared components, directives, or pipelines is usually created. Directives like Copy Code button, components like up vote/down vote are usually included in a common module.
Conclusion
For smaller websites, it might not matter much that all the modules are loaded at once. But, as the site grows it's very effective to have separate modules which are loaded as needed.
Because of lazy loading, load time for the websites can be reduced drastically. This is specially helpful when you are trying to rank higher in SEO's. Even if not, less loading times means better user experience.
Are you interested in more articles? Check these out:
