No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Implementando una propia estrategia de precarga

7/23
Recursos

¿Cómo evitar la sobrecarga de módulos en aplicaciones web?

El desarrollo de aplicaciones web eficientes es esencial en estos días de alto consumo de datos. Atom Móviles podría representar un problema si se cargan demasiados módulos innecesariamente. La sobrecarga devora datos y recursos. ¡Es hora de optimizar tu aplicación! Introducir estrategias como la "precarga selectiva" garantiza un uso más inteligente de los recursos, personalizando qué módulos se cargan y cuáles no.

Puedes tomar control total de las decisiones sobre qué precargar y qué no. Examinemos cómo hacerlo.

Estrategia de precarga selectiva

Para implementar esta estrategia en tu aplicación, necesitas modificar algunas características de las rutas y servicios en Angular. El proceso se basa en agregar metadatos a las rutas que deseas precargar, asegurando así un manejo más eficiente de los recursos y datos.

  1. Editar el servicio: Crea un nuevo servicio que se almacenará en tu carpeta core. Este servicio se encargará de gestionar la carga selectiva de módulos.

  2. Añadir metadatos a las rutas: Es importante anotar las rutas que deseas precargar. Añade una bandera específica en las rutas que quieres precargar, utilizando código como este:

    {
      path: 'home',
      loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
      data: { preload: true }
    }
    
  3. Implementar la interfaz angular: Utiliza la interfaz proporcionada por Angular para definir qué rutas deben ser precargadas usando la estrategia, como sigue:

    import { PreloadingStrategy, Route } from '@angular/router';
    import { Observable, of } from 'rxjs';
    
    export class CustomPreloadingStrategyService implements PreloadingStrategy {
      preload(route: Route, load: () => Observable<any>): Observable<any> {
        return route.data && route.data['preload'] ? load() : of(null);
      }
    }
    
  4. Configurar el módulo Angular para usar la nueva estrategia: Modifica las configuraciones para aplicar la nueva estrategia de precarga:

    imports: [
      RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategyService })
    ]
    

Ventajas y limitaciones de la precarga selectiva

Las estrategias de precarga selectiva permiten a los desarrolladores tener control sobre qué módulos cargar y en qué momento. Sin embargo, presentan ciertas limitaciones:

  • Control del desarrollador: La decisión de qué cargar recae en el equipo de desarrollo, lo que puede no coincidir con las necesidades del usuario final.
  • Consumo de datos: Aunque minimiza el uso de datos, el sistema aún depende de la elección manual del desarrollador, lo que podría dejar fuera módulos frecuentemente utilizados por los usuarios finales.

Hacia un enfoque centrado en el usuario

Más allá de las estrategias manuales, el futuro del desarrollo web se dirige a la personalización basada en datos reales del usuario. Las estrategias automatizadas que se ajustan a las interacciones y necesidades del usuario prometen ser la próxima frontera. Aún así, dominar la precarga selectiva es un paso fundamental en la creación de aplicaciones eficientes y funcionales.

En conclusión, te animo a que sigas explorando y experimentando con estas técnicas, llevándolas al siguiente nivel con datos de usuario reales. Así, asegurarás una experiencia más óptima y personalizada para cada usuario, adaptando tu aplicación a sus verdaderas necesidades. ¡El mundo del desarrollo web está en constante evolución y siempre hay algo nuevo por aprender!

Aportes 9

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Les cuento que esto también funciona con child modules, es decir, la estrategia se debe de declarar en el app.module pero cualquier modulo hijo también es afectado solo que tenga la metadata.

Man! Esto si lo lleva a otro nivel, lo puedo variar por temas de publicidad, por temas de roles y mejor aún cruzarlo con Analytics para ver lo más visto y precargarlo.

Excelente clase, ya todo tiene mucho más sentido. Arriba la cuarentenaaaaa

Estrategia de carga selectiva

//crear el service
ng g core/services/preload
// archivo core/services/preload.services.ts
import { Inyectable} from '@angular/core'
import { PreloadingStrategy } from '@angular/router'
import { Observable, of } from 'rxjs'

expport class PreloadService implements PreloadingStrategy {
    preload(route: Route, load: ()=> Observable<any>) : Observable<any> {
        if (route.data && route.data['preload']) {
            return load();
        }else {
            return of()
            // of() observable vacio
        }
    }
}
// archivo app-routing.module.ts
//agrega metadata a las rutas
...
import { PreloadService } from './core/services/preload.service'
...
{
    path:'home',
    loadChildren: ()=>import('path').then(m=>m.MModule),
    data: { preload: true }
    // ese preload puede ser una variable que nosotros creemos
}
...
//cambiar la estrategia de precarga 
@NgModule({
    imports: [RouterModule.forRoot(routes, {
        preloadingStrategy: PreloadService
    })],
    exports: [RouterModule]
})
export class AppRoutingModule { }

En las proximas clases vamos a ver Estrategias orientadas a los datos

que buen curso.

Interesante yo en mis proyectos he implementado solamente la primera opcion…
Buen curso

El ejemplo es muy bueno, lo acabo de implementar en mi sistema donde precargo de acuerdo con el tipo de usuario y está funcionando muy bien, gracias.

Les comparto mi código:

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

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

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

}```

Estrategia de carga selectiva, esta muy genial