Code splitting por rota no React: carregue só o que a página precisa

Em muitas aplicações React, todo o código vai num arquivo só. Quem abre a página inicial baixa também o checkout, o painel, os gráficos e o editor de texto — telas que talvez nunca visite. É o caminho mais curto para LCP e INP ruins.

Dividir por rota

import { lazy } from 'react'
const Painel = lazy(() => import('./pages/Painel'))

Cada página vira um arquivo separado, baixado quando o usuário navega até ela. Com React Router, o carregamento pode ser feito pelo próprio roteador antes de trocar de tela, sem tela em branco.

Dividir bibliotecas pesadas

• Gráficos, mapas, editores e 3D: carregue só na tela que usa.
• Bibliotecas de data, ícones e utilitários: importe apenas as funções necessárias.

Cuidado com a experiência

Dividir não pode significar "piscar" a cada navegação. Pré-carregue a próxima rota provável (quando o mouse passa sobre o link, por exemplo) e mostre skeletons no lugar de telas vazias (Feedback assíncrono: por que trocar spinners genéricos por skeleton screens).

Como saber se funcionou

Ferramentas de análise de bundle mostram o tamanho de cada arquivo e o que há dentro — o processo está em Bundle JavaScript pesado: como descobrir quem está engordando o seu site. Depois, confira o efeito real no Core Web Vitals (Como otimizar a performance de aplicações React e React Native para passar no Core Web Vitals).

Uma escolha de base

Frameworks como Next.js fazem a divisão por rota automaticamente; com Vite, você configura. A comparação está em Next.js ou Vite: qual base escolher para o seu próximo projeto web.

Este site usa divisão por rota e carrega o 3D separadamente. Veja Performance WPO ou fale com a gente.