Carga diferida de componentes en Angular para mejorar rendimiento

Contenido del curso

Configuración Inicial

Gestión de Entornos

Nuevas Funcionalidades en Angular

Server-Side Rendering (SSR) y Navegación

Optimización de Rendimiento

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:10

Carga diferida de componentes en Angular para mejorar rendimiento

Curso de Angular Avanzado

Clase 32 de 36

Clase 32 / 36

Recursos

La optimización de rendimiento en Angular es un aspecto fundamental para desarrollar aplicaciones web modernas y eficientes. Mediante técnicas avanzadas como lazy loading y code splitting, podemos mejorar significativamente la experiencia del usuario al reducir los tiempos de carga y optimizar el uso de recursos. Estas estrategias son esenciales tanto para aplicaciones con server-side rendering como para aplicaciones tradicionales de cliente.

¿Qué es el lazy loading y code splitting en Angular?

El lazy loading en Angular es una técnica que permite cargar partes específicas de la aplicación solo cuando son necesarias. Tradicionalmente, este concepto se aplicaba a nivel de rutas, donde cada página cargaba su propio JavaScript específico en lugar de cargar todo el código en el bundle inicial.

El code splitting complementa esta técnica al dividir la aplicación en diferentes "chunks" o fragmentos de JavaScript. Esto significa que:

Cada ruta puede tener su propio archivo JavaScript específico (por ejemplo, about.js, products.js)
Solo se carga el código necesario cuando el usuario navega a una página específica
Se reduce significativamente el tamaño del bundle inicial

Esta estrategia mejora el rendimiento inicial de la aplicación, ya que el usuario no necesita descargar código que posiblemente nunca utilice.

¿Cómo funciona el lazy loading tradicional por rutas?

En el enfoque tradicional de lazy loading en Angular:

La aplicación se divide en módulos por rutas
Cuando el usuario navega a una ruta específica, Angular carga dinámicamente el módulo correspondiente
Esto reduce el tiempo de carga inicial y mejora la experiencia del usuario

Este método ha sido la base de la optimización en Angular durante mucho tiempo, pero las técnicas modernas nos permiten ir más allá.

¿Cómo implementar lazy loading a nivel de componentes?

Las técnicas modernas de JavaScript nos permiten aplicar lazy loading no solo a nivel de rutas, sino también a nivel de componentes individuales dentro de una misma página. Esto es particularmente útil cuando:

Una página contiene múltiples componentes pesados
Algunos componentes están fuera del viewport inicial
Ciertos componentes solo se muestran bajo condiciones específicas

Para implementar esta técnica en Angular, utilizamos la directiva defer:

<div style="margin-bottom: 80vh;">
  <!-- Contenido principal del producto -->
</div>

@defer (on viewport) {
  <app-related-products [products]="relatedProducts"></app-related-products>
} @placeholder {
  <!-- Contenido opcional mientras se carga -->
}

En este ejemplo:

El componente app-related-products solo se cargará cuando entre en el viewport del usuario
El JavaScript asociado a este componente no forma parte del chunk inicial
Si el usuario nunca hace scroll hasta esa sección, el código nunca se cargará

Esta técnica optimiza aún más el rendimiento al cargar componentes específicos solo cuando realmente son necesarios, similar a cómo funciona el lazy loading de imágenes.

¿Qué opciones ofrece la directiva defer?

La directiva defer en Angular ofrece varias opciones para controlar cuándo se carga un componente:

on viewport: Carga el componente cuando entra en el viewport del usuario
on hover: Carga el componente cuando el usuario pasa el cursor sobre un elemento
on interaction: Carga el componente cuando el usuario interactúa con un elemento
when: Permite definir una condición personalizada para la carga
immediate: Carga el componente tan pronto como el navegador esté desocupado

Estas opciones proporcionan gran flexibilidad para optimizar la carga de componentes según las necesidades específicas de la aplicación.

¿Cuáles son los beneficios del lazy loading a nivel de componentes?

Implementar lazy loading a nivel de componentes ofrece numerosos beneficios:

Reducción del tamaño inicial de JavaScript: Solo se carga lo esencial para la visualización inicial
Mejora en el tiempo de carga: La página principal se carga más rápido al diferir componentes secundarios
Optimización de recursos: Se utilizan los recursos del navegador de manera más eficiente
Mejor experiencia de usuario: La interactividad inicial mejora al priorizar los componentes visibles
Aplicable a todo tipo de aplicaciones: Funciona tanto en aplicaciones con server-side rendering como en aplicaciones tradicionales de cliente

Esta técnica es especialmente valiosa en aplicaciones complejas con muchos componentes o en aplicaciones de back office con numerosos formularios y elementos interactivos.

El lazy loading a nivel de componentes representa una evolución natural en la optimización de aplicaciones Angular, permitiendo un control más granular sobre cómo y cuándo se carga el código. Al implementar estas técnicas, podemos crear aplicaciones más rápidas, eficientes y con mejor experiencia de usuario, independientemente de si utilizamos server-side rendering o no.

¿Has implementado alguna de estas técnicas en tus proyectos? Comparte tu experiencia en los comentarios y cuéntanos cómo ha mejorado el rendimiento de tus aplicaciones Angular.

Resumen

¿Qué es el lazy loading y code splitting en Angular?

El code splitting complementa esta técnica al dividir la aplicación en diferentes "chunks" o fragmentos de JavaScript. Esto significa que:

Cada ruta puede tener su propio archivo JavaScript específico (por ejemplo, about.js, products.js)
Solo se carga el código necesario cuando el usuario navega a una página específica
Se reduce significativamente el tamaño del bundle inicial

Esta estrategia mejora el rendimiento inicial de la aplicación, ya que el usuario no necesita descargar código que posiblemente nunca utilice.

¿Cómo funciona el lazy loading tradicional por rutas?

En el enfoque tradicional de lazy loading en Angular:

La aplicación se divide en módulos por rutas
Cuando el usuario navega a una ruta específica, Angular carga dinámicamente el módulo correspondiente
Esto reduce el tiempo de carga inicial y mejora la experiencia del usuario

Este método ha sido la base de la optimización en Angular durante mucho tiempo, pero las técnicas modernas nos permiten ir más allá.

¿Cómo implementar lazy loading a nivel de componentes?

Una página contiene múltiples componentes pesados
Algunos componentes están fuera del viewport inicial
Ciertos componentes solo se muestran bajo condiciones específicas

Para implementar esta técnica en Angular, utilizamos la directiva defer:

<div style="margin-bottom: 80vh;">
  <!-- Contenido principal del producto -->
</div>

@defer (on viewport) {
  <app-related-products [products]="relatedProducts"></app-related-products>
} @placeholder {
  <!-- Contenido opcional mientras se carga -->
}

En este ejemplo:

El componente app-related-products solo se cargará cuando entre en el viewport del usuario
El JavaScript asociado a este componente no forma parte del chunk inicial
Si el usuario nunca hace scroll hasta esa sección, el código nunca se cargará

Esta técnica optimiza aún más el rendimiento al cargar componentes específicos solo cuando realmente son necesarios, similar a cómo funciona el lazy loading de imágenes.

¿Qué opciones ofrece la directiva defer?

La directiva defer en Angular ofrece varias opciones para controlar cuándo se carga un componente:

on viewport: Carga el componente cuando entra en el viewport del usuario
on hover: Carga el componente cuando el usuario pasa el cursor sobre un elemento
on interaction: Carga el componente cuando el usuario interactúa con un elemento
when: Permite definir una condición personalizada para la carga
immediate: Carga el componente tan pronto como el navegador esté desocupado

Estas opciones proporcionan gran flexibilidad para optimizar la carga de componentes según las necesidades específicas de la aplicación.

¿Cuáles son los beneficios del lazy loading a nivel de componentes?

Implementar lazy loading a nivel de componentes ofrece numerosos beneficios:

Reducción del tamaño inicial de JavaScript: Solo se carga lo esencial para la visualización inicial
Mejora en el tiempo de carga: La página principal se carga más rápido al diferir componentes secundarios
Optimización de recursos: Se utilizan los recursos del navegador de manera más eficiente
Mejor experiencia de usuario: La interactividad inicial mejora al priorizar los componentes visibles
Aplicable a todo tipo de aplicaciones: Funciona tanto en aplicaciones con server-side rendering como en aplicaciones tradicionales de cliente

Esta técnica es especialmente valiosa en aplicaciones complejas con muchos componentes o en aplicaciones de back office con numerosos formularios y elementos interactivos.

¿Has implementado alguna de estas técnicas en tus proyectos? Comparte tu experiencia en los comentarios y cuéntanos cómo ha mejorado el rendimiento de tus aplicaciones Angular.

Configuración Inicial

Curso Avanzado de Desarrollo con Angular para eCommerce

Clona y explora el proyecto base de Angular

Configuración de ESLint y Prettier en proyectos Angular

Prettier y ESLint sin conflictos en Angular

Gestión de Entornos

Manejo de environments en Angular

Ambiente de staging en Angular paso a paso

Nuevas Funcionalidades en Angular

Variables locales con @let en Angular

Lazy loading de imágenes con ngSrc en Angular

URLs amigables para SEO en Angular

"Reactividad en Angular: Migración a Input Signals"

Migración automática de @Input a signals en Angular

Migración de Outputs en Angular: De Decoradores a Funciones

linkedSignal en Angular: computed con set

Sincronización de Componentes en Angular con Model y Signals

toSignal: Observables de RxJS como Signals

Conversión de Observables a Signals en Angular con toSignal

Interoperabilidad de RXDS y Signals en Angular: Uso de RX Resourcers

Manejo de Parámetros Reactivos con RX Resource en Angular

Manejo de Promesas y Fetch en Angular sin RXJS

Reactividad en Angular: Uso de Signals para Consultas DOM

Configuración de Prettier para HTML en Angular

Server-Side Rendering (SSR) y Navegación

Migración al Application Builder de Angular

Server Side Rendering con Angular: Mejora Rendimiento y SEO

afterNextRender: código seguro solo en el browser

Geolocalización y APIs: Creando un Mapa de Tiendas Cercanas

Pre-rendering en Angular con ng build

Desplegando Angular SSR en Firebase

Optimización de Rendimiento

Generación de Meta Tags Dinámicos con Angular y Open Graph

Creación de MetaTags Dinámicos en Angular

Proceso de Hydration y Event Replay en Angular

Productos relacionados con RxResource en Angular

Carga diferida de componentes en Angular para mejorar rendimiento

Optimización de Incremental Hydration en Angular

Configuración de Server Routing en Angular

Aplicaciones Sin Zone.js: Migración a Signals en Angular

Cierre del curso avanzado de Angular

Carga diferida de componentes en Angular para mejorar rendimiento