¿Cuál es el objetivo principal del code splitting?

Code splitting reduce carga inicial y difiere código no crítico para mejorar tiempo de arranque.

React

Code Splitting con React.lazy y Suspense

Optimiza tiempos de carga inicial dividiendo bundles y cargando componentes bajo demanda con React.lazy y Suspense.

¿Cuánto sabes de React?

📘 Teoría

Qué ganas con code splitting

Reducir JS inicial acelera primer render útil, especialmente en dispositivos modestos.

Separar rutas o módulos pesados evita que usuarios descarguen código que quizá nunca usarán.

Esto mejora no solo velocidad percibida, también consumo de datos en móvil.

Combinar splitting con caching de chunks puede mejorar visitas recurrentes.

Patrón base con React.lazy

Import dinámico + Suspense = carga diferida controlada.

Componente lazy

import { lazy, Suspense } from 'react';

const ReportsPage = lazy(() => import('./pages/ReportsPage'));

function App() {
  return (
    <Suspense fallback={<p>Cargando módulo...</p>}>
      <ReportsPage />
    </Suspense>
  );
}

Criterios de implementación

Divide por valor de negocio y comportamiento de navegación, no por moda.

Si fragmentas demasiado, puedes introducir latencia repetida en navegación interna.

El equilibrio ideal depende del patrón real de uso de tu aplicación.

Rutas poco frecuentes candidatas a lazy.
Módulos de administración o analytics suelen pesar más.
Fallbacks breves y claros para evitar parpadeos molestos.
Mide con Lighthouse/DevTools antes y después.

1 Qué ganas con code splitting 2 Patrón base con React.lazy 3 Criterios de implementación

🧪 Aprende probando

Ejemplo Ejemplo: rutas lazy en dashboard Carga diferida de páginas secundarias para aligerar bundle inicial.

⌄

🏁 Retos

Reto Reto: convierte import estático a lazy Sustituye la importación directa de `AdminPage` por `React.lazy`.

⌄

🧰 Recursos

Enlaces útiles

lazy Suspense Code splitting (Vite/Rollup concepts)

Test

Comprueba tus conocimientos con un test sobre React.

Test de React

Recursos del curso 25

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 20

Memoización en React: React.memo, useMemo y useCallback con criterio

Lección 22

Testing en React con Vitest y Testing Library

›