𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗲𝗺 𝗥𝗲𝗮𝗰𝘁

Grandes aplicações React criam bundles JavaScript grandes. Bundles grandes tornam seu site mais lento. Os usuários esperam mais tempo para interagir com seu app. Isso prejudica a sua experiência do usuário.

O lazy loading resolve isso. Ele carrega componentes apenas quando os usuários precisam deles. Você deixa de carregar tudo de uma vez.

Benefícios do lazy loading:

  • Tamanho inicial do bundle menor
  • Carregamentos de página mais rápidos
  • Melhor experiência do usuário
  • Menor uso de largura de banda
  • Melhores Core Web Vitals

Como usar React.lazy() O React fornece uma função chamada lazy() para importar componentes dinamicamente. O React baixa o código apenas quando renderiza o componente.

Exemplo de código: import { lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

Você deve usar o Suspense com componentes lazy. O Suspense mostra uma UI de fallback enquanto o componente é carregado.

Exemplo de código: import { Suspense, lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

function App() { return ( <Suspense fallback={

Loading...
}> ); }

Duas regras para o sucesso:

  • Seus componentes devem usar default exports.
  • Declare seus imports lazy fora das funções dos seus componentes.

Você usa lazy loading em seus projetos? Deixe um comentário abaixo. Eu responderei.

Source: https://dev.to/madhubankhatri/lazy-loading-in-react-improve-performance-with-reactlazy-and-suspense-5edk