Carga componentes de React de forma diferida con lazy() y Suspense, divide rutas en React Router, aplaza imágenes con loading="lazy" y evita ralentizar tu imagen principal. Incluye demo en vivo.
El lazy loading (carga diferida) en React consiste en descargar código o imágenes solo cuando hacen falta. Envuelve un import dinámico en lazy(), renderiza el componente dentro de un límite Suspense con un fallback y React lo descarga en el primer render. Para las imágenes, el atributo HTML loading="lazy" hace lo mismo, pero nunca en la imagen principal visible sin hacer scroll.
Qué herramienta de carga diferida encaja en cada caso
Un bundle grande hace que cada visitante espere por código que quizá nunca use, como un gráfico en una pestaña de ajustes o una página de administración. La carga diferida divide ese código en archivos separados que el navegador descarga cuando los necesita. Prueba la demo de abajo y luego copia los patrones para componentes, rutas, imágenes y contenido que se carga al hacer scroll.
Un componente que puedes renderizar. Su función de carga debe devolver una Promise que se resuelva en un objeto cuya propiedad default sea un componente de React válido, que es justo lo que hace un import() dinámico de una exportación por defecto.
No. react.dev dice que tanto la Promise devuelta como su valor resuelto se guardan en caché, así que React no llama a la función de carga más de una vez. La demo de esta página muestra que la segunda apertura es instantánea.
lazy() espera una exportación por defecto. Para una con nombre, asígnala dentro de la función de carga: lazy(() => import("./Charts").then((m) => ({ default: m.SalesChart }))).
Sí, en la imagen más grande de la pantalla. web.dev comprobó que cargar de forma diferida las imágenes visibles sin hacer scroll tendía a empeorar el Largest Contentful Paint, y que hacerlo solo con las imágenes de más abajo mantenía el ahorro de datos sin ese coste.
React lanza el motivo del rechazo durante el render, y el error boundary más cercano lo captura. Si no hay ninguno, react.dev dice que React elimina por defecto la interfaz de la app de la pantalla.
El patrón estándar: una declaración lazy al principio del archivo y un límite Suspense alrededor de donde se renderiza.
El archivo del gráfico no se descarga hasta que showChart pasa a true por primera vez.
Los objetos de ruta de React Router aceptan una función lazy que devuelve las propiedades de la ruta, así que cada página se convierte en su propio archivo.
La página de informes y su loader solo se descargan cuando alguien visita /reports.
Los navegadores gestionan de forma nativa la carga diferida de imágenes. Marca como lazy las imágenes por debajo del pliegue y da a la imagen principal una prioridad de descarga alta.
El ancho y el alto reservan espacio para que nada se desplace cuando llega la imagen.
Para contenido que no es una imagen, como un mapa o un widget de reseñas, un pequeño hook te avisa cuando su caja entra en pantalla.
El rootMargin de 200px empieza a cargar un poco antes de que la caja sea visible; una vez vista, el observer se desconecta.
Este botón renderiza un componente creado con lazy(). Su descarga se simula para que tarde 2 segundos la primera vez.
Mostrar gráfico de ventas
Ocultar gráfico de ventas
Cargando el archivo del gráfico...
Archivo del gráfico cargado. Ocúltalo y vuelve a mostrarlo: aparece al instante, porque React guardó en caché la primera carga.
Ventas por mes
Empieza gratis · Sin tarjeta de crédito