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 → Solução

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 de entrevista

Tip

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

Código

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

<Suspense fallback={<Skeleton />}>
  <Dashboard />
</Suspense>

Perguntas de entrevista

Q.React.lazy vs next/dynamic?▾

A.React.lazy é a API padrão do React, funciona em qualquer app. next/dynamic é o wrapper do Next.js que adiciona: SSR opcional (ssr: false), loading fallback, e suporte a named exports.

Q.O que é prefetching?▾

A.Carregar o chunk antes do usuário precisar. Next.js Link prefetch (faz auto em hover/viewport). Pode ser manual com import() em handlers.

Q.Code splitting por rota vs por componente?▾

A.Por rota é mais simples e geralmente suficiente. Por componente faz sentido para componentes pesados raramente usados (modais complexos, editores, charts).

Termos relacionados

18/122← →