No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

All Modules y Custom Strategy

17/25
Recursos

Al haber activado la t茅cnica de Lazy Loading , puedes personalizar el env铆o de estos m贸dulos al cliente con diferentes estrategias.

C贸mo hacer precarga de m贸dulos bajo demanda

Por defecto, la aplicaci贸n enviar谩 al cliente solo el m贸dulo que necesita. Si ingresas al m贸dulo website, solo se cargar谩 su respectivo archivo JS.

Render inicialpng

Si el usuario solicita otro m贸dulo, este se cargar谩 solo cuando sea necesario.

Solicitud de un m贸dulo posteriormente.png

Esto puede causarte problemas, ya que si el m贸dulo solicitado es algo pesado o la conexi贸n es lenta, tardar谩 varios segundos en estar listo y no ser谩 buena la experiencia de usuario.

C贸mo hacer precarga de todos los m贸dulos

Puedes decirle a tu aplicaci贸n que, por defecto, precargue todos los m贸dulos con la siguiente configuraci贸n.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./modules/website/website.module').then(m => m.WebsiteModule),
  },
  {
    path: 'cms',
    loadChildren: () => import('./modules/cms/cms.module').then(m => m.CmsModule),
  }
];

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

Importando PreloadAllModules desde @angular/router, lo pasas como par谩metro al import en el decorador @NgModule(). De esta manera, se cargar谩n en el primer render TODOS los m贸dulos que tu aplicaci贸n tenga, pudiendo ver por consola algo como lo siguiente.

Precarga de todos los m贸dulos.png

Pasos para una estrategia personalizada de precarga

Precargar todos los m贸dulos a la vez, puede ser contraproducente. Imagina que tu aplicaci贸n posea 50 o 100 m贸dulos. Ser铆a lo mismo que tener todo en un mismo archivo main.js.

Para solucionar esto, puedes personalizar la estrategia de descarga de m贸dulos indicando qu茅 m贸dulos si se deben precargar y cu谩les no.

1. Agrega metadata a cada ruta

Agr茅gale a cada regla en el routing de tu aplicaci贸n, metadata para indicarle a cada m贸dulo si debe ser precargado, o no.

// app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./modules/website/website.module').then(m => m.WebsiteModule),
    data: { preload: true },
  },
  {
    path: 'cms',
    loadChildren: () => import('./modules/cms/cms.module').then(m => m.CmsModule),
    data: { preload: true },
  }
];

Con la propiedad data: { preload: true }, le indicas al servicio CustomPreloadingStrategy si el m贸dulo debe ser precargado en el primer render de tu app.

2. Crea un servicio con estrategia personalizada

Crea un servicio al cual llamaremos CustomPreloadingStrategy con la siguiente l贸gica.

// modules/shared/services/custom-preloading-strategy.service.ts
import { Injectable } from '@angular/core';
import { Route, PreloadingStrategy } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CustomPreloadingStrategyService implements PreloadingStrategy {

  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data.preload)
      return load();
    else
      return of(null);
  }

}

El servicio implementa PreloadingStrategy y sobreescribiendo el m茅todo preload(), hace uso de la metadata para desarrollar tu propia l贸gica de renderizado de m贸dulos.

3. Importa tu estrategia

Finalmente, importa tu estrategia personalizada en el routing.

// app-routing.module.ts
import { CustomPreloadingStrategyService } from './modules/shared/services/custom-preloading-strategy.service';

// ..

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

De esta manera, ya puedes personalizar qu茅 m贸dulos ser谩n enviados al cliente y cu谩les no, mejorando as铆 el rendimiento de tu aplicaci贸n.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 4

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Chicos, cuando crean el m茅todo, miren que no utilicen camelCase 鈥減reLoad()鈥 ya que les dar谩 un error en el nombre de la case.

Ya saben que el nombre del m茅todo debe ir sin camelCase
preload(){}

Muy interesante el crear una estrategia para precargar los m贸dulos.

Mis apuntes de esta clase

Dado que el modularizar la app se tienen varios chuncks y cada uno de estos corresponde a un archivo de JS, a su vez cada uno de estos archivos requiere de una petici贸n al servidor y al descargarse cada archivo JS debe pasar por varias etapas para su ejecuci贸n. Esto puede tardar mucho en conexiones lentas. Una forma que proporciona Angular para solucionar esto es aprovechar los momentos de inactividad del navegador despu茅s de la carga inicial para descargar en segundo plano los archivos de los otros m贸dulos mientras el usuario navega por el website. A este proceso se le conoce como precarga de m贸dulos.

Aca va el codigo del preload()

preload(route: Route, load: () => Observable<any>): Observable<any> {
    if(route.data && route.data['preload']){
      return load();
    }
   return of(null);
  }