Implementando QuicklinkStrategy

Curso de Rendimiento en Angular

Introducción

Angular 8 Performace

Analizando el tamaño del Bundle

¿Qué es un bundle size? Tree shaking y su importancia

Implementando Webpack Bundle Analyzer

Moment vs date-fns

Aplicando un Performance Budget desde el Angular CLI

Aumenta la velocidad de navegación

Code splitting a nivel de rutas

Implementando una propia estrategia de precarga

Implementando QuicklinkStrategy

Usando Machine Learning para predecir rutas

Google Analytics y Angular

Implementando GuessJs

Precarga con Service workers

¿Qué es Server Side Render?

Implementando Angular Universal

Cuidados con SSR y Angular

Rendimiento en tiempo de ejecución

¿Qué es el Change Detection?

Preparando módulo para Change Detection

Analizando el Change Detection

Optimización de componentes con OnPush

Usando pipes puros

Async

Conclusiones

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

Recursos

¿Cómo mejorar la carga de módulos en una aplicación web?

La carga eficiente de módulos es esencial para ofrecer una experiencia de usuario fluida, especialmente en aplicaciones web grandes. Los métodos tradicionales de precarga, como la precarga completa (Atom Moyo) o la precarga selectiva, tienen sus limitaciones cuando se trata de optimizar el consumo de memoria y evitar tiempos de carga prolongados. Pero, ¿qué tal si pudiéramos hacer que la aplicación cargue dinámicamente solo lo que el usuario necesita en tiempo real? Aquí es donde entra en juego la estrategia de precarga "Quicklink".

¿Qué es la estrategia de precarga "Quicklink"?

"Quicklink" es un enfoque innovador que pre-carga de manera dinámica los módulos en función del comportamiento del usuario, en lugar de lo que el desarrollador elige adelantado. Utiliza técnicas de observación de intersección (Intersection Observer) para detectar los enlaces que entran en el viewport de la aplicación y los pre-carga automáticamente.

¿Cómo funciona la intersección del observador (Intersection Observer)?

La Intersección del Observador (Intersection Observer API) monitorea los elementos que entran y salen del viewport:

Detecta automáticamente qué tan adentro o afuera está un elemento del viewport.
Precarga los elementos a medida que aparecen en vista al hacer scroll.
Ofrece un rendimiento superior puesto que evita la costosa necesidad de medir scrolls manualmente.

¿Cómo implementar "Quicklink" en Angular?

Para implementar "Quicklink" en una aplicación Angular:

Instalación: Inicia instalando la librería necesaria para "Quicklink" en tu aplicación utilizando npm.
Configuración: Configura correctamente tu aplicación para que los módulos correspondientes utilicen la estrategia de precarga de "Quicklink":

// Importa el módulo de Quicklink en los módulos que utilizan RouterLink
import { QuicklinkModule } from 'ngx-quicklink';

// Configura el router para usar Quicklink
RouterModule.forRoot(routes, {
  preloadingStrategy: QuicklinkStrategy
})

Optimización dinámica: Solo pre-cargarás los módulos a medida que sean necesarios al desplazarse por la aplicación. Por ejemplo, si tienes módulos como "Github" o "Admin" que utilicen RouterLink, asegúrate de que estén configurados para pre-cargar sólo cuando estén visibles en pantalla.
Pruebas y ajuste: Ejecuta tu aplicación en un entorno de pruebas para verificar que los módulos se cargan dinámicamente conforme al desplazamiento del usuario.

¿Cuáles son los beneficios de esta estrategia?

Rendimiento mejorado: Reduce el tiempo de carga inicial y mejora el uso de memoria al cargar solo lo necesario.
Experiencia de usuario: Ofrece una carga instantánea para los módulos que el usuario está a punto de ver, mejorando la percepción de velocidad de la aplicación.
Escalabilidad: Facilita el manejo de aplicaciones más grandes sin sacrificar la velocidad de carga.

Implementar "Quicklink" en tu aplicación puede transformar cómo los usuarios experimentan la carga de contenido, haciendo que cada interacción sea más intuitiva y satisfactoria. ¡Manos a la obra y sigue optimizando tus aplicaciones!

Aportes 9

Preguntas 4

Ordenar por:

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

Jose Daniel Barría Reyes

hace 5 años

QuicklinkStrategy
detecta los link que estan en el viewport y precarga esos modulos
Utiliza IntersectionObserver para llevar a cabo su tarea.

installar quicklink

npm install gnx-quicklink --save

Importarlo en app.module y shared.module

// app.module.ts y tambien en shared.module.ts
import { QuicklinkStrategy } from 'ngx-quicklink'

@NgModule({
    ...
    imports: [
        ...
        QuicklinkModule
    ]
})

Implementar la estrategia en el app-routing

// app-routing.module.ts 
import { QuicklinkStrategy } from 'ngx-quicklink'

...
@NgModule({
    imports: [RouterModule.forRoot(routes, {
        enableTRacing: false,
        preloadingStrategy: QuicklinkStrategy,
        paramsInheritanceStrategy: 'always'
    })],
    exports: [RouterModule]
})
export class AppRoutingModule { }

listo.

Yhoan Andres Galeano Urrea

hace 5 años

Link para leer sobre la API que permita esta gran funcionalidad

https://developer.mozilla.org/es/docs/Web/API/Intersection_Observer_API

Victor Barajas

hace 4 años

quicklink solo detecta los RouteLink de angular?? si yo coloco this.route.navigateByUrl() en el ts tambien los detecta??

Enrique Ortuno

hace 5 años

Que ventaja real tiene esta forma de pre-cargar, si en realidad todos los routerlink estan en el homepage? solo seria util en el caso que tengas links que estan dentro de otros modulos?