✂️
Performance

Code Splitting por Rota

Cada rota carrega apenas seu próprio JS — bundle inicial menor, carregamento mais rápido.

Definição

Code splitting divide o bundle JavaScript em chunks menores carregados sob demanda. React.lazy() + Suspense é o padrão para componentes. Em Next.js App Router, cada page.tsx é automaticamente um chunk separado.

🔴 Problema

Bundle único com todas as telas: usuário baixa código de páginas que pode nunca visitar.

Solução

React.lazy + dynamic import divide o bundle por rota. Suspense mostra skeleton durante o carregamento.

💡 Dica Senior

No Next.js App Router, cada page.tsx já é automaticamente code-split. React.lazy() não é necessário.

Perguntas de Entrevista

18/48