Code Splitting no React: como usar lazy loading no Vite

Code splitting no React é a técnica de dividir o JavaScript do seu site em vários arquivos menores, carregados apenas quando o usuário precisa deles. Em vez de baixar o app inteiro na primeira visita, o navegador recebe só o essencial, e o restante chega sob demanda com React.lazy, Suspense e importações dinâmicas. O resultado é um site mais rápido, melhor nota nas métricas do Google e mais conversão.

##Por que o code splitting importa para SEO e conversão

Por padrão, ferramentas de build juntam todo o código em um único bundle. Quanto maior esse arquivo, mais tempo o navegador gasta baixando, interpretando e executando JavaScript antes de mostrar algo útil.

O Google usa as Core Web Vitals, como o LCP (Largest Contentful Paint) e o INP (Interaction to Next Paint), como sinais de experiência de página. Menos JavaScript no carregamento inicial ajuda diretamente nessas métricas, o que beneficia o ranqueamento e a taxa de conversão de landing pages.

Os principais ganhos do code splitting são:

• Carregamento inicial mais rápido, com menos JavaScript bloqueando a página.
• Melhor desempenho em celulares e conexões lentas.
• Cache mais eficiente, já que um arquivo alterado não invalida todo o bundle.
• Menos consumo de dados para o usuário.

##Como usar React.lazy e Suspense

A forma mais comum de fazer lazy loading no React é combinar React.lazy com Suspense. O React.lazy recebe uma função que faz um import() dinâmico, e o Suspense mostra um conteúdo alternativo enquanto o componente é baixado.

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<p>Carregando...</p>}>
      <Dashboard />
    </Suspense>
  );
}

O componente carregado com lazy precisa ter exportação padrão (export default). Para exportações nomeadas, é preciso criar um módulo intermediário que reexporte o componente como default.

##Code splitting por rotas: o melhor ponto de partida

Dividir o código por rota costuma dar o maior retorno com o menor esforço. O usuário que entra na home não precisa baixar o código do painel administrativo, da página de checkout ou do blog.

Com React Router, o padrão é carregar cada página de forma preguiçosa:

const Home = lazy(() => import('./pages/Home'));
const Blog = lazy(() => import('./pages/Blog'));

<Suspense fallback={<Spinner />}>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/blog" element={<Blog />} />
  </Routes>
</Suspense>

Dica prática: mantenha a página inicial fora do lazy loading, ou carregue-a de forma normal, para que o conteúdo principal apareça o mais rápido possível. Aplique o lazy nas páginas secundárias.

##Como o Vite faz o code splitting

O Vite entende nativamente o import() dinâmico. Cada importação dinâmica vira um chunk separado no build de produção, sem configuração extra. Você pode conferir o resultado rodando npm run build e observando os arquivos gerados na pasta dist/assets.

###Separando bibliotecas pesadas

Bibliotecas grandes, como editores de texto, gráficos ou mapas, são ótimas candidatas a carregamento sob demanda. Importe-as dinamicamente apenas no momento do uso:

async function abrirGrafico() {
  const { Chart } = await import('chart.js');
  // usar a biblioteca aqui
}

Se precisar de controle fino, o Vite permite configurar a divisão de chunks no vite.config.js pela opção build.rollupOptions.output.manualChunks, agrupando, por exemplo, as dependências de terceiros em um arquivo próprio para melhorar o cache.

##Boas práticas e erros comuns

Dividir demais também atrapalha. Muitos arquivos minúsculos geram requisições extras e podem piorar a experiência. Use estas regras:

1. Comece por rotas e por componentes pesados que não aparecem na primeira tela.
2. Nunca aplique lazy em conteúdo que aparece acima da dobra (above the fold), pois isso atrasa o LCP.
3. Use um fallback com tamanho parecido com o do conteúdo final, evitando saltos de layout.
4. Envolva os componentes lazy em um Error Boundary, para tratar falhas de rede ao baixar o chunk.
5. Meça antes e depois com o Lighthouse e o PageSpeed Insights, que usam dados reais para validar o ganho.

##Perguntas Frequentes

O que é code splitting no React? É a divisão do bundle de JavaScript em partes menores, carregadas apenas quando necessárias. Isso reduz o peso do carregamento inicial e acelera o site.

Qual a diferença entre code splitting e lazy loading? Code splitting é a divisão do código em vários arquivos (chunks). Lazy loading é carregar esses arquivos somente quando o usuário precisa. Os dois conceitos trabalham juntos.

Code splitting melhora o SEO? De forma indireta, sim. Ele melhora o tempo de carregamento e as Core Web Vitals, que o Google considera na experiência de página, o que ajuda no desempenho nas buscas.

O Vite faz code splitting automaticamente? Sim, para importações dinâmicas com import(). Cada uma gera um chunk próprio no build. Para mais controle, você pode usar a opção manualChunks.

Quando não usar React.lazy? Evite em componentes visíveis na primeira tela e em partes muito pequenas do app, onde a requisição extra custa mais do que economiza.

##Conclusão

Aplicar code splitting no React é uma das otimizações mais eficientes para quem trabalha com React e Vite: comece pelas rotas, isole bibliotecas pesadas e meça os resultados. Na Stormcore, criamos sites, landing pages e sistemas com foco em performance, e esse tipo de otimização faz parte de como entregamos projetos rápidos e prontos para ranquear.