Lección 10 de 12 · Lectura y práctica

Code Splitting: Carga Perfumada para Mejores Experiencias

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,.

Del concepto a la práctica

Taller de esta lección

Code splitting tiene sentido cuando una parte de la interfaz es poco frecuente o pesada y puede esperar. La decisión debe conservar una estructura estable durante la carga: el fallback ocupa un lugar equivalente y comunica qué sección llegará, sin reemplazar toda la pantalla.

Ejemplo resuelto

jsx

let metricsLoadCalls = 0;
const Metrics = React.lazy(() => {
  metricsLoadCalls += 1;
  return import("./Metrics");
});
function Panel() {
  const [open, setOpen] = React.useState(false);
  return <section>
    <button onClick={() => setOpen(true)}>Abrir métricas</button>
    {open && <React.Suspense fallback={<section aria-label="Métricas">Cargando métricas...</section>}>
      <Metrics />
    </React.Suspense>}
  </section>;
}

Mientras el módulo se resuelve, existe una sección con etiqueta y texto verificables.

Pruébalo

Coloca Metrics detrás de una acción de apertura.
Simula una carga pendiente.
Comprueba que el resto del panel sigue visible y el fallback conserva la sección.

Comprueba tu resultado

Error frecuente: dividir cada botón pequeño y aumentar complejidad sin beneficio. Corrígelo reservando la técnica para una ruta o sección diferida.

Ejercicio: registra si la métrica solo se solicita al abrir; el resultado esperado es cero invocaciones del cargador antes de esa acción y una después en una sesión nueva del ejemplo.

Metrics.jsx debe exportar el componente como default. React conserva el resultado del cargador lazy; cerrar y abrir la sección no exige volver a invocarlo. El contador registra llamadas al cargador, no garantiza el número de solicitudes de red del empaquetador o navegador, que puede aplicar precarga o caché.

lazy conduce a un import pendiente y a Suspense con Cargando; al estar listo aparece Pantalla, y un import rechazado conduce a ErrorBoundary. — **Carga de código con fallback**
lazy difiere la carga de un módulo. Suspense muestra el fallback mientras el import está pendiente; si el import se rechaza, una Error Boundary adecuada muestra el error en lugar de tratarlo como carga eterna.
Ver la infografía en tamaño completo ↗

Fuentes para profundizar

React: lazy ↗

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ó.

Sigue con React Intermedio: Patrones y Optimización

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

← Anterior: React.memo y useMemo: Evitando Renderizados Innecesarios Siguiente: ErrorBoundary React: ejemplo práctico y fallback →Entrar y guardar mi progreso