UncategorizedJanuary 9, 2018by BoldThemes1How Lazy Loading Impacts Angular App Performance

What is the problem with Angular Components?

The components act as a page in the Angular applications. Generally, What we do while creating Angular applications?. We will create many components based on the project requirements. Say, for example, if you are creating an Angular application and it requires ten pages(10 pages only). Then we will create ten components and deploy the application to the Cloud server. Assume the whole dist folder size is around 2–3 MB. When you load the particular application, the browser will load all the ten components in a first request. The loaded components will be cached in the browser memory. And it serves the page very fast. It gives the user a better user experience. It is the feature of Angular. Yes, Angular will load all the components in a single request. That’s why it renders pages very fast when compared to previous technologies. Only the data will be fetched from the server each time.

Loading all components in a single request is too good if your application is very small. Why because it reduces the render time as well as the bandwidth, unlike old technologies. But what if you have more components. Say, for example, if you have 100 or more than 100 components. Again the Angular will try to load all the 100+ components in a single request. And it will consume more time to load all the components. The user will get frustrated if the application takes more time to load and will leave the application. We will lose the use-base if an application takes too much time to load.

What is Lazy Loading?

How we can avoid this problem?. In simple terms, load the needed components only instead of loading all the components. This concept will reduce the load time.

Load only needed components and load other components when you need them instead of loading all the components in a single request. Yes, this is called Lazy Loading.

Lazy Loading can be achieved by putting the components under modules. You can split your components and put them under various modules. By default the root page loaded. The modules will be loaded only when they are requested. Say, for example, if you have 10 modules, only the root page is loaded in a first request. The remaining modules will be loaded only when they are requested. It reduces the loading time.

When to use Lazy Loading?

The Lazy Loading must be implemented when you are designing a big Angular application. A big application means it generates more MB in the dist folder or has more components. In my opinion, if your application exceeds more than 2 MB, then you can use the concept of Lazy Loading. Why because, if you take today’s internet speed, loading 2MB is very easy. However, you have to consider in which area the application is going to be used. If your user is having a slow internet connection, then you have to optimize the size and implement lazy loading accordingly.

Beginners must aware of this concept. I will share my story. When I was new to Angular I don’t know the Lazy Loading concept. Completed a few projects without implementing/knowing the Lazy Loading(Around 25 pages of application). I didn’t felt any slow in the application and the users also not reported anything about application load time. Why because we had a good internet connection.

After some time, I entered into a big application(ERP). We finished all the basic work like designing the database and create a UI prototype. Initially, we created 100 components. Then it exceeds more than 200 components. Only UI level components created. At the time, I faced a big problem. The dist is not generating due to memory problems(More components). I faced a heap memory error. Then we increased memory and generated dist without implementing Lazy Loading.

Then we started to develop the application. Even in the local development environment, it takes more to load when we do a simple change in the application. At the time only I realized we doing something wrong. I decided to address the problem. Then googled and found the Lazy Loading concept.

It is double work for us. Moving all the components to a separate module consumes lots of time, Why because we already started the development. It is a big mistake. So you must be aware of the Lazy Loading while doing Angular Application.

How to Implement lazy Loading?

First, create a module.
Create components under the module.
Create routing for the components under the module.
Include the newly created routing to the main routing(app.routing.ts)
The above four steps will help you to achieve lazy loading in your Angular application.

Assume we are going to create a billing application. And the billing application has four components.

1. Category List
2. Product List
3. New Bill
4. Bill ListNow I am going to put the above four components into two modules.

1.Master Data Module ( Category List, Product List)
2.Bill Data Module( New Bill, Bill List)

Project Structure

1. Create New Module

Create a new module using the below command. Here we are going to create two modules.

ng g module master-data
ng g module bill-data

2.Create Components Under Module

To create a component we can use the same command. But add the module name before the command name.

Create components for the master data module.

ng g c master-data/category-list
ng g c master-data/product-list

Create components for the bill data module.

ng g c bill-data/bill-list
ng g c bill-data/new-bill

3.Create Routing for Components

To create a routing, we need to create a routing.ts file under the module folder.

For the master data module create a new file named master-data.routing.ts file under the master-data folder. And paste the below code.

import { CategoryListComponent } from ‘./category-list/category-list.component’;
import { ProductsListComponent } from ‘./products-list/products-list.component’;
import { Routes } from ‘@angular/router’;

export const routes: Routes = [

{ path: ‘products-list’,component: ProductsListComponent },
{ path: ‘category-list’,component: CategoryListComponent },

]

Now include the routes to the master-data.module.ts file.

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { ProductsListComponent } from ‘./products-list/products-list.component’;
import { CategoryListComponent } from ‘./category-list/category-list.component’;

import {routes} from ‘./master-data.routing’;
import { RouterModule } from ‘@angular/router’;

@NgModule({
declarations: [ProductsListComponent, CategoryListComponent],
imports: [
CommonModule,
RouterModule.forChild(routes),
]
})
export class MasterDataModule { }

Repeat the same step for the bill-data module also.

4.Include the Module to Main Routing

Now import and include the newly created module routing in the app.routing.ts file.

import { HomeComponent } from ‘./home/home.component’;
import { AppComponent } from ‘./app.component’;
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;

const routes: Routes = [
{path:”,component:HomeComponent},
{ path: ‘master-data’, loadChildren: () => import(‘./master-data/master-data.module’).then(m => m.MasterDataModule) },
{ path: ‘bill-data’, loadChildren: () => import(‘./bill-data/bill-data.module’).then(m => m.BillDataModule) },
];

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

I created a home component and made it as a default root page. When loading the application, it loads only the home component. If we navigate to the product-list, then only the bill-data module will be loaded. If you are not navigating to the product or category page, then the master-data module can not be loaded. Only the required page module will be loaded.

Navigate to various routes using the below code in the home.component.html file.

<a role=”button” routerLink=’/master-data/products-list’ class=”btn btn-primary”>Products List</a>    
<a role=”button” routerLink=’/master-data/category-list’ class=”btn btn-secondary”>Category List</a>   
<a role=”button” routerLink=’/bill-data/bill-list’ class=”btn btn-success”>Bill List</a>   
<a role=”button” routerLink=’/bill-data/new-bill’ class=”btn btn-danger”>New Bill</a>

Sample Output