Scribd
Upload
37 views

Lazy Loading

Lazy loading in Angular allows modules to be loaded on demand when they are needed rather than all at once. This improves performance by loading only the necessary code for the active route. The document describes generating modules and routing modules for individual components like Battle and Search, then loading them lazily from the main app routing module. This avoids loading all code upfront and instead loads modules asynchronously as the user navigates to those routes.

Uploaded by

Elmer Diaz Quiroz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

Lazy Loading

Lazy loading in Angular allows modules to be loaded on demand when they are needed rather than all at once. This improves performance by loading only the necessary code for the active route. The document describes generating modules and routing modules for individual components like Battle and Search, then loading them lazily from the main app routing module. This avoids loading all code upfront and instead loads modules asynchronously as the user navigates to those routes.

Uploaded by

Elmer Diaz Quiroz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

¿Cómo implementar Lazy Loading en

Angular?
Una de las buenas prácticas que nos provee este gran framework es la carga de
módulos mediante Lazy Loading.

Pero antes de continuar, ¿qué es eso de “Lazy Loading”?

Lazy Load es un patrón de diseño que consiste en retrasar la carga o inicialización de


un objeto hasta el momento de su utilización.

Esto significa que obtiene los datos o procesa los objetos solamente cuando se
necesitan, no antes. Esto se debe a que si se obtiene todos los datos antes de usarlos
puede tener como resultado una mala experiencia de usuario, esto es muy
importante del lado del frontend, porque sabemos que toda la carga es del lado del
cliente, modularizar y diferir cargas ayuda a la aplicación a enfocarse en un código en
específico.

Ahora si hablemos de cómo aplicar este patrón en la carga de módulos en Angular.

Vamos a crear una aplicación con dos componentes (Battle y Search) que serán
llamados por un menú, donde hay un componente llamado (Admin) que es nuestra
base.

Una mala práctica que aplicamos a la hora de empezar a programar con este
framework es que por cada componente que creamos se carga en el app.module.ts y
se llama a cada componente en el app-routing.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';


import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AdminComponent } from './modules/admin/admin.component';
import { BattleComponent } from './modules/battle/battle.component';
import { SearchComponent } from
'./modules/search/search.component';@NgModule({
declarations: [
AppComponent,
AdminComponent,
BattleComponent,
SearchComponent
], imports: [
BrowserModule
], providers: [], bootstrap: [AppComponent]})export class AppModule
{ }

app-routing.module.ts

const routes: Routes = [


{
path: '',
component: AdminComponent,
children: [
{
path: 'battle',
component: BattleComponent
},
{
path: 'search',
component: SearchComponent
}
]
},
{ path: '**', redirectTo: 'battle' },
];

Es una mala práctica, porque, por ejemplo, si vamos a la ruta Battle nos carga todos
los componentes que creamos y en una aplicación más grande vamos a ver que el
rendimiento es super malo.

La mejor forma de revertir esto es aplicando Lazy Loading, para esto debemos crear
un module y un router.module por cada componente que queremos utilizar, lo
podemos hacer con el Angular Cli.

$ ng g m modules/battle --routing
$ ng g c modules/battle

$ ng g m modules/search --routing
$ ng g c modules/search

Si nos vamos a la carpeta modules/battle podemos observar los siguientes archivos


que se crearon
|____battle-routing.module.ts
|____battle.component.css
|____battle.component.html
|____battle.component.spec.ts
|____battle.component.ts
|____battle.module.ts

Vamos a modificar el battle-routing.module.ts y quedaría de la siguiente manera:

import { NgModule } from '@angular/core';


import { Routes, RouterModule } from '@angular/router';
import { BattleComponent } from './battle.component';const routes:
Routes = [
{
path: '',
component: BattleComponent
}
];@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})export class BattleRoutingModule { }

Lo mismo hacemos con el search-routing.module, estos routings serán importados


desde su respectivo module.

Ahora vamos a llamar estos modules desde el app-routing.module.ts

const routes: Routes = [


{
path: '',
component: AdminComponent,
children: [
{
path: 'battle',
loadChildren: './modules/battle/battle.module#BattleModule'
},
{
path: 'search',
loadChildren: './modules/search/search.module#SearchModule'
}
]
},
{ path: '**', redirectTo: 'battle' },
];

De esta forma nuestro app.module.ts queda más limpio y los demás componentes
serán llamados a medida que serán solicitados por sus respectivas rutas.

Cuando corremos el ng build vemos que no se crea un solo archivo .js donde está
nuestra aplicación, sino el crea por cada módulo un .js (Ver imagen)

En este caso vemos que los .js que empiezan por 4 y 5 son nuestros módulos Battle y
Search.

Y así correría en nuestro server:


Otro caso de uso, podría ser que dentro de nuestro componente Battle tuviese más
componentes hijos y rutas hijas, en este caso el battle-routing.module.ts quedaría de
la siguiente manera.

import { NgModule } from '@angular/core';


import { Routes, RouterModule } from '@angular/router';
import { BattleComponent } from './battle.component';const routes:
Routes = [
{
path: '',
component: BattleComponent,
children: [
{
path: '',
redirectTo: 'battle-child',
pathMatch: 'full'
},
{
path: 'battle-child',
loadChildren:
'./modules/battle/child/child.module#ChildModule'
},
{
path: 'battle-child-two',
loadChildren:
'./modules/battle/child-two/child-two.module#ChildTwoModule'
}
] }
];@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})export class BattleRoutingModule { }

Como frontend developers tenemos muchas responsabilidades, y más allá de que la


aplicación sea brutal, lo mejor del mundo, si tarda mucho en cargar, el usuario final
se nos va y adiós todo el trabajo.

Lazy Loading nos ayuda a que nuestro usuario final disfrute de nuestra app

You might also like