Lazy loading es una técnica que permite cargar módulos o componentes de manera diferida en una aplicación Angular. Esto significa que en lugar de cargar todos los módulos o componentes de la aplicación de manera síncrona al inicio, solo se cargan aquellos que son necesarios en ese momento.
Ventajas:
- Mejora el rendimiento de la aplicación, ya que se evita cargar todo el contenido al inicio y solo se carga lo necesario cuando se necesita.
- Reduce el tamaño de la aplicación, ya que solo se incluyen los módulos o componentes necesarios en el bundle final.
- Permite crear aplicaciones más escalables, ya que se pueden agregar nuevos módulos o componentes de manera sencilla sin tener que volver a cargar la aplicación completa.
Para implementar lazy loading en Angular 15, debes seguir estos pasos:
- Crea un módulo o componente que quieres cargar de manera diferida.
- Utiliza el decorador “
@NgModule"
y el atributoloadChildren
para especificar la ruta del módulo o componente que se debe cargar de manera diferida.
@NgModule({
imports: [
RouterModule.forRoot([
{
path: 'lazy',
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}
])
]
})
export class AppRoutingModule { }
3. Utiliza la ruta del módulo o componente en un enlace de navegación para cargarlo de manera diferida cuando se haga clic en el enlace.
<a routerLink="/lazy">Cargar módulo o componente de manera diferida</a>
Es importante tener en cuenta que la carga diferida solo se aplica a módulos o componentes y no a recursos como imágenes o archivos de estilo. También es importante mencionar que la carga diferida no es compatible con navegadores antiguos que no soporten ECMAScript 6.
Espero que esto te haya ayudado a entender cómo funciona el lazy loading en Angular 15.
Si tienes alguna duda adicional, no dudes en preguntar en los comentarios del video.