Carga diferida de componentes
Posponga el renderizado de componentes no críticos con importaciones dinámicas y observadores de intersección.
Carga diferida de componentes es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Por qué usar carga diferida
Posponga la carga de componentes pesados o no esenciales para reducir el tamaño del bundle inicial.
Importación dinámica
Use import() para cargar un módulo de forma asíncrona.
let Component;
onMount(async () => {
Component = (await import("./Heavy.svelte")).default;
});Renderizar al cargar
Use <svelte:component> para renderizar el componente dinámico.
{#if Component}
<svelte:component this={Component} />
{/if}Intersection Observer
Combínelo con IntersectionObserver para cargar el componente cuando el marcador de posición entre en el viewport.
Wrapper de la acción
Construya una acción use:lazy reutilizable para encapsular este patrón.
Estado de carga
Muestre un skeleton o un indicador de carga hasta que llegue el componente.
Uso bajo el área visible inicial
Los comentarios, las publicaciones relacionadas y los widgets del pie de página son buenos candidatos para la carga diferida.
Mejoras de rendimiento
Reduce el JS inicial y acelera el TTI, especialmente en dispositivos móviles.
Precarga anticipada
Opcionalmente, precargue los módulos al pasar el cursor sobre ellos o cuando estén cerca del viewport para que las interacciones sean más ágiles.
Evitar dividir en exceso
En componentes pequeños, el coste adicional de una importación dinámica supera el ahorro.
Combinar con streaming
En páginas renderizadas en el servidor, el streaming combinado con la hidratación diferida produce primeros renderizados rápidos.
Comprobación rápida
¿Cómo se renderiza un componente importado dinámicamente?
Resumen
Cargue de forma diferida los componentes pesados mediante una importación dinámica y svelte:component, opcionalmente activada por la intersección.
Preguntas frecuentes
¿La lección «Carga diferida de componentes» es gratis?
Sí — el texto completo de «Carga diferida de componentes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Carga diferida de componentes»?
Posponga el renderizado de componentes no críticos con importaciones dinámicas y observadores de intersección. Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Carga diferida de componentes»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- División de código e importaciones dinámicas
- Optimización de imágenes con @sveltejs/enhanced-img
- Carga diferida de componentes
- Creación de perfiles de aplicaciones SvelteKit