Carga diferida con @defer

El bloque at-defer carga de forma diferida una parte de la plantilla y sus dependencias, lo que mejora el rendimiento de la carga inicial. El contenido diferido se separa en un chunk independiente.

Incluya el contenido en un bloque at-defer. De forma predeterminada, se carga cuando el navegador está inactivo.

Posponer los componentes pesados o situados por debajo del área visible mantiene pequeño el bundle inicial y acelera el primer renderizado. El componente se carga únicamente cuando realmente se necesita.

Un bloque at-placeholder muestra contenido antes de que se active el bloque diferido.

Un bloque at-loading se muestra mientras se obtiene el fragmento diferido.

Un bloque at-error se renderiza si falla la carga de las dependencias diferidas.

Usted controla cuándo comienza la carga mediante activadores en una cláusula on, como on idle, on viewport, on interaction, on hover o on timer.

El activador on viewport carga el contenido cuando aparece en la vista al desplazarse, lo que resulta ideal para las secciones que están por debajo del área visible inicialmente.

on interaction carga el contenido cuando el usuario hace clic en el marcador de posición o lo enfoca; on hover lo carga cuando el puntero pasa sobre él.

También puede activar la carga mediante una expresión booleana usando when; la carga comienza cuando la expresión se vuelve true.

Puede precargar el fragmento diferido por separado de su renderizado; por ejemplo, puede usar prefetch on idle para que esté listo antes de que se active el renderizado.

Activación de contenido diferido.

Ha aprendido a usar el bloque at-defer para la carga diferida, junto con los bloques at-placeholder, at-loading y at-error, y activadores como on idle, on viewport, on interaction, on hover, on timer y when, además de la precarga. Ha completado el curso Flujo de control integrado.