Cuando empaquetas tu app, todo tu código se junta en un "bundle" de JavaScript que el navegador
descarga antes de mostrar nada. Si esa app es grande, el usuario espera bajando código de pantallas
que quizá ni visite. El CODE SPLITTING lo resuelve: parte el bundle en trozos que se cargan BAJO
DEMANDA, solo cuando se necesitan. React lo hace con lazy y Suspense. Hoy lo ves funcionando en
vivo.
Llevar solo la maleta de hoy
lazy + Suspense en vivo
lazy(() => import("./Componente")) convierte un componente en uno que se carga BAJO DEMANDA
(cuando se renderiza por primera vez). <Suspense> muestra un fallback mientras ese trozo llega:
Pulsa "Abrir reportes": PanelPesado se carga en ese momento (verás el fallback "Cargando reportes…"
un instante) porque lazy(() => import("./PanelPesado")) lo dejó FUERA del bundle inicial. Si el
usuario nunca abre los reportes, nunca descarga ese código. <Suspense> con su fallback cubre el
momento en que el trozo viaja —el mismo <Suspense> que viste con datos en el módulo 5, aquí con
código—. Dos líneas para una app que arranca más ligera.
¿Qué hace lazy(() => import('./X')) junto con Suspense y para qué sirve?
Mini-reto
Amplía el playground: 1) agrega un segundo componente pesado en su propio archivo (GraficaExtra.tsx)
y cárgalo con otro lazy, mostrado por otro botón; 2) envuelve ambos en un solo <Suspense> con un
fallback común y observa el comportamiento; 3) en un comentario, explica qué ruta de tu app dividirías
primero con lazy y por qué (pista: la más pesada que no todos visitan). Nota que el usuario solo paga
por lo que abre.
Qué sigue
El code splitting reduce lo que se DESCARGA. La próxima técnica reduce lo que se RENDERIZA: cuando tienes
una lista de miles de elementos, pintarlos todos en el DOM mata el rendimiento. La VIRTUALIZACIÓN
renderiza solo los que se ven —y la construirás desde cero, en vivo—.