📖
Performance

Code Splitting

Dividir o bundle JS em chunks menores, carregados sob demanda.

📚 O que é

Sem code splitting: todo JS da app é baixado no primeiro load. Com splitting: cada rota/feature tem seu chunk. Browser baixa só o necessário. React.lazy + import() dinâmico implementa no client. Next.js App Router faz por rota automaticamente.

✅ Quando usar

Rotas secundárias pesadas. Componentes raramente usados (editores, modais complexos, charts). Qualquer feature que não é necessária no primeiro render.

🚫 Quando NÃO usar

Componentes pequenos e leves — overhead do chunk não vale. Componentes críticos para o first render (above the fold).

👍 Prós
Bundle inicial menor
Carregamento mais rápido
LCP melhorado
Usuário baixa menos no total
👎 Contras
Chunks extras para baixar depois
Possível delay na navegação
Loader states necessários
Complexidade de build
🔗 Termos relacionados