Faça lazy loading de componentes React com lazy() e Suspense, divida rotas no React Router, adie imagens com loading="lazy" e evite atrasar a sua imagem principal. Com demo ao vivo.
Lazy loading no React significa buscar código ou imagens só quando eles são necessários. Envolva um import dinâmico em lazy(), renderize o componente dentro de um limite Suspense com um fallback, e o React o baixa na primeira renderização. Para imagens, o atributo HTML loading="lazy" faz o mesmo, mas nunca na sua imagem principal acima da dobra.
Qual ferramenta de lazy loading serve para cada caso
Um bundle grande faz todo visitante esperar por código que talvez nunca use, como um gráfico em uma aba de configurações ou uma página de administração. O lazy loading divide esse código em arquivos separados que o navegador busca sob demanda. Experimente a demo abaixo e depois copie os padrões para componentes, rotas, imagens e conteúdo acionado pela rolagem.
Um componente que você pode renderizar. A função de carregamento precisa retornar uma Promise que resolve para um objeto cuja propriedade default é um componente React válido, e é isso que um import() dinâmico de um export default faz.
Não. O react.dev diz que tanto a Promise retornada quanto o valor resolvido ficam em cache, então o React não chama a função de carregamento mais de uma vez. A demo desta página mostra a segunda abertura acontecendo na hora.
O lazy() espera um export default. Para um nomeado, mapeie dentro da função de carregamento: lazy(() => import("./Charts").then((m) => ({ default: m.SalesChart }))).
Sim, no caso da maior imagem da tela. O web.dev descobriu que fazer lazy loading de imagens acima da dobra tendia a piorar o Largest Contentful Paint, e que aplicá-lo só às imagens abaixo da dobra mantinha a economia de dados sem esse custo.
O React lança o motivo da rejeição durante a renderização, e o error boundary mais próximo o captura. Sem um, o react.dev diz que o React remove por padrão a interface do app da tela.
O padrão de sempre: uma declaração lazy no topo do arquivo e um limite Suspense em volta de onde ele é renderizado.
O arquivo do gráfico só é buscado quando showChart vira true pela primeira vez.
Os objetos de rota do React Router aceitam uma função lazy que retorna as propriedades da rota, então cada página vira um arquivo próprio.
A página de relatórios e o loader dela só são baixados quando alguém visita /reports.
Os navegadores fazem lazy loading de imagens nativamente. Marque as imagens abaixo da dobra como lazy e dê à imagem principal uma prioridade de busca alta.
A largura e a altura reservam espaço para nada se deslocar quando a imagem chegar.
Para conteúdo que não é imagem, como um mapa ou um widget de avaliações, um pequeno hook avisa quando a caixa dele entra na tela.
O rootMargin de 200px começa a carregar um pouco antes de a caixa ficar visível; depois de vista, o observer se desconecta.
Este botão renderiza um componente criado com lazy(). O download dele foi simulado para levar 2 segundos na primeira vez.
Mostrar gráfico de vendas
Ocultar gráfico de vendas
Carregando o arquivo do gráfico...
Arquivo do gráfico carregado. Oculte e mostre de novo: ele aparece na hora, porque o React guardou em cache o primeiro carregamento.
Vendas por mês
Comece grátis · Sem cartão de crédito