Implementar la carga diferida en Angular

1. Uso de Lazy Loading en Angular
2. Implementar la carga diferida en Angular

Este tutorial discutirá el uso de la carga diferida en Angular y cómo implementarlo.

La carga diferida es el proceso de cargar los recursos de una página web de manera retrasada. Esta técnica generalmente se usa en páginas web con grandes cantidades de datos o imágenes, no en el nivel superior.

La carga diferida angular ayuda a cargar solo los recursos necesarios para una página determinada. Esto reduce el tamaño de descarga inicial y mejora el rendimiento de su aplicación al reducir las solicitudes de red.

Se puede lograr utilizando el módulo Lazy Load integrado de Angular o un módulo externo como Angular Universal Lazy Load Module, que se basa en Webpack para la configuración y las compilaciones.

Uso de Lazy Loading en Angular

El caso de uso más común para la carga diferida es cuando se cargan datos desde una API, pero no desea obtener todos los datos. No funcionará si su aplicación tiene una vista única sin enrutamiento.

La carga diferida garantiza que solo se cargan y utilizan los módulos esenciales cuando la aplicación se implementa por primera vez. Esto beneficia a la aplicación en términos de rendimiento, ya que reduce los tiempos de carga, lo que da como resultado una aplicación con mayor capacidad de respuesta para el usuario final.

Lleva algo de tiempo cargar todos los módulos, por lo que lo que hace es cargar solo unos pocos módulos cuando el usuario visita una página por primera vez y luego carga más según sea necesario.

Analicemos algunos de los casos de uso de carga diferida de Angular.

• Aplazar scripts y hojas de estilo no críticos hasta que se necesiten;
• Las pantallas orientadas al proveedor y orientadas al cliente en un sitio web de comercio electrónico pueden separarse en diferentes módulos. También puede construir un módulo de pago por su cuenta.
• Carga de scripts y hojas de estilo solo bajo demanda.

Implementar la carga diferida en Angular

Implementar la carga diferida en Angular es un proceso muy sencillo. Debemos agregar los módulos correctos y configurar nuestras rutas.

El primer paso es agregar los módulos necesarios para la carga diferida. Hacemos esto importando LazyModule desde @angular/router y agregándolo a nuestra matriz de importaciones en el decorador NgModule de nuestro módulo de aplicación.

Luego, debemos configurar nuestras rutas para especificar qué módulos se deben cargar a pedido o cargar de forma lenta a pedido. Agregamos una nueva ruta con loadChildren: 'lazy-loaded-child-routes' como atributo o modificamos una ruta existente.

Ejemplo:

Código TypeScript (app.component.ts):

import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent { }
@Component({
    selector: 'app-home',
    template: '<h3>Home Active!!!</h3>',
})
export class AppadComponent  {}
const routes: Routes = [
    { path: 'Home', component: AppadComponent },
    { path: 'About', loadChildren: './lazy-loading.module#SecondModule' }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class RootRoutingModule { }

Código TypeScript (lazy-loading.modules.ts):

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'app-about',
    template: '<h3>About Active!!!</h3>',
})
export class MyComponent  {}
const routes: Routes = [
    { path: '', component: MyComponent }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class RootRoutingModule { }
@NgModule({
    imports:      [ RootRoutingModule ],
    declarations: [ MyComponent ]
})
export class SecondModule { }

Código HTML (aplicación.componente.html):

<h2> Example of Angular Lazy Loading</h2>
    <a routerLink='Home'>Home</a>
    <br>
    <a routerLink='About'>About</a>
    <router-outlet></router-outlet>

Haga clic aquí para comprobar el funcionamiento del código anterior.

Si es posible, evite las rutas de carga lenta que sus usuarios visitan con frecuencia. Reduzca el tamaño de sus trozos tanto como sea posible.

Además, cuando se recupera una ruta con carga diferida, use los estados del enrutador para mostrar un cargador o una animación para que sus usuarios no piensen que su aplicación se está retrasando.