Code Splitting: carga progresiva para mejores experiencias
Code splitting divide el JavaScript en partes más pequeñas para cargar solo lo necesario al inicio. Esto mejora la experiencia en rutas pesadas, dashboards, editores, gráficos o modales que no siempre se usan.
Cuándo conviene
- Componentes grandes que no aparecen en el primer render.
- Rutas de administración, dashboards o editores.
- Librerías pesadas de gráficos, mapas, markdown o video.
- Modales o paneles que el usuario abre bajo demanda.
import { lazy, Suspense } from "react";
const AnalyticsPanel = lazy(() => import("./AnalyticsPanel"));
export function Dashboard() {
return (
<Suspense fallback={<p>Cargando analytics...</p>}>
<AnalyticsPanel />
</Suspense>
);
}Buenas prácticas
- Usá fallbacks que no rompan el layout.
- No dividas componentes pequeños sin motivo.
- Probá el flujo en red lenta.
- Combiná code splitting con límites de error si el módulo puede fallar.
Ejercicio: dividir un componente pesado
Identificá una librería pesada en una pantalla React y cargala con lazy y Suspense. Medí si el bundle inicial baja y si el fallback se ve profesional.
Entregable
- Antes y después del import.
- Fallback visible y estable.
- Comentario técnico explicando por qué se dividió.
