Carga diferida (Lazy Loading) en React
Las aplicaciones grandes de React crean bundles de JavaScript de gran tamaño. Los bundles grandes ralentizan tu sitio. Los usuarios tardan más en interactuar con tu aplicación. Esto perjudica tu experiencia de usuario.
La carga diferida resuelve esto. Carga los componentes solo cuando los usuarios los necesitan. Dejas de cargar todo de una sola vez.
Beneficios de la carga diferida:
- Tamaño de bundle inicial más pequeño
- Cargas de página más rápidas
- Mejor experiencia de usuario
- Menor uso de ancho de banda
- Mejores Core Web Vitals
Cómo usar React.lazy() React proporciona una función llamada lazy() para importar componentes dinámicamente. React descarga el código solo cuando renderiza el componente.
Ejemplo de código: import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
Debes usar Suspense con componentes lazy. Suspense muestra una interfaz de respaldo (fallback UI) mientras el componente se carga.
Ejemplo de código: import { Suspense, lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
function App() { return ( <Suspense fallback={
Dos reglas para tener éxito:
- Tus componentes deben usar exportaciones por defecto (default exports).
- Declara tus importaciones lazy fuera de tus funciones de componente.
¿Usas la carga diferida en tus proyectos? Deja un comentario abajo. Te responderé.