Optimización Extrema con Deferrable Views (@defer)
El Lazy Loading tradicionalmente se aplicaba a nivel de rutas. Si entrabas a una ruta, cargabas todo el módulo. ¿Pero qué pasa si tienes un componente muy pesado (como un gráfico complejo o un mapa) que está visible solo si el usuario hace scroll hacia abajo?
Aquí entra @defer. Esta sintaxis permite diferir la carga de partes específicas de tu plantilla de manera declarativa.
Sintaxis Básica y Bloques
El bloque @defer maneja varios estados automáticos:
@defer (on viewport) {
<heavy-chart-component />
} @loading (minimum 1s) {
<p>Cargando gráfico...</p>
} @placeholder {
<img src="chart-placeholder.png" alt="Placeholder" />
} @error {
<p>Hubo un error al cargar el componente.</p>
}Desglose de los bloques:
- @defer: El contenido principal que se cargará perezosamente (el chunk de JS se separa automáticamente).
- @placeholder: Lo que se muestra antes de que comience la carga. Es instantáneo.
- @loading: Lo que se muestra mientras se descarga el código JS del componente.
- @error: Si falla la red o la carga del script.
Triggers (Disparadores)
La magia real está en cuándo se carga el contenido. Angular ofrece disparadores potentes:
on idle: (Por defecto) Se carga cuando el navegador está inactivo.on viewport: Se carga cuando el placeholder entra en la pantalla visible.on interaction: Se carga cuando el usuario hace clic o interactúa con el placeholder.on hover: Se carga al pasar el mouse por encima.on immediate: Se carga inmediatamente después de renderizar, pero en un chunk separado.when condition: Se carga cuando una expresión booleana sea verdadera.
Ejemplo Práctico: Comentarios de un Blog
No necesitamos cargar el componente de comentarios hasta que el usuario llegue al final del post.
@defer (on viewport) {
<app-comments-section [postId]="id" />
} @placeholder {
<div class="skeleton-comments">Cargar comentarios...</div>
}Usar @defer correctamente mejora drásticamente métricas como el LCP (Largest Contentful Paint) y reduce el tamaño del bundle inicial (TBT).