Single Blog

Angular es un framework ampliamente valorado por el orden que ofrece al momento de programar, en gran parte gracias a TypeScript, el superset de JavaScript que utiliza. Una de las buenas prácticas más recomendadas es la carga de módulos a través del enfoque de implementar Lazy Loading en Angular.

¿Qué es Lazy Loading?

El término Lazy Loading se refiere a un patrón de diseño que retrasa la carga o inicialización de un objeto hasta el momento en que realmente se necesita. En lugar de cargar todos los datos o recursos de forma anticipada, este enfoque asegura que solo se obtengan los necesarios en un momento dado.

Esto es especialmente relevante en el desarrollo frontend, ya que una carga excesiva de datos al inicio puede generar una mala experiencia de usuario. Dado que en las aplicaciones Angular toda la carga ocurre del lado del cliente, es fundamental modularizar y diferir las cargas para que la aplicación se enfoque únicamente en el código esencial en cada momento.

Aplicando Lazy Loading en Angular

Imaginemos que desarrollamos una aplicación con tres componentes principales: Admin (como base), Battle, y Search, que serán accesibles a través de un menú.

Un error común:

Cuando comenzamos a programar en Angular, es habitual cargar todos los componentes directamente en app.module.ts y configurar sus rutas en app-routing.module.ts. Sin embargo, esto es una mala práctica, ya que al acceder a una ruta específica (por ejemplo, Battle), Angular termina cargando todos los componentes de la aplicación, incluso los que no son necesarios en ese momento. Esto afecta negativamente al rendimiento, especialmente en aplicaciones grandes, por eso debemos implementar Lazy Loading.

La solución:

Con Lazy Loading, podemos crear un módulo y un archivo de enrutamiento específico para cada componente. Por ejemplo:

• Battle tendrá su propio módulo (battle.module.ts) y archivo de enrutamiento (battle-routing.module.ts).
• Search seguirá la misma lógica con search.module.ts y search-routing.module.ts.

Estos módulos se importarán en app-routing.module.ts únicamente cuando sus rutas sean requeridas. Esto no solo limpia el archivo app.module.ts, sino que también mejora significativamente el rendimiento al cargar únicamente los módulos necesarios en cada momento.

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' },
];

En conclusión, implementar Lazy Loading en Angular no solo optimiza el rendimiento de las aplicaciones, sino que también mejora la experiencia del usuario al garantizar una carga más rápida y eficiente. Adoptar estas buenas prácticas contribuye al desarrollo de aplicaciones escalables y bien estructuradas. ¡Aprovecha al máximo las herramientas que Angular ofrece y lleva tus proyectos al siguiente nivel!

Si deseas ampliar tu conocimiento sobre el Lazy Loading, utiliza el siguiente enlace: Documentación Angular o contacta con nosotros: Contacto