Intermediário FE

Lazy Loading & Code Splitting

Carregar JS só quando necessário. React.lazy + Suspense para componentes. Divisão por rota é o mínimo.

Definição

Code splitting divide o bundle JavaScript em chunks menores carregados sob demanda. React.lazy + Suspense carrega componentes dinamicamente. Next.js faz code splitting por página automaticamente. dynamic() do Next.js é o equivalente com suporte a SSR e opção ssr:false para componentes client-only (mapas, editores, charts pesados).

Problema → Solução

Problema

Bundle único de 2MB que bloqueia o First Contentful Paint. Usuário baixa código de páginas que nunca vai visitar. Componentes pesados carregados mesmo quando o usuário não os acessa.

Solução

Divisão por rota (automático no Next.js). Lazy loading de componentes pesados com dynamic(). Prefetch de rotas prováveis com Link prefetch. Analisar o bundle com @next/bundle-analyzer para identificar o que pesa mais.

Dica de entrevista

Tip

Em Next.js, todo arquivo em app/ já é um chunk separado. O ganho extra vem de lazy-loading componentes pesados dentro da página: editores (Monaco, Quill), charts (Recharts, D3), mapas (Leaflet), e modais raramente usados.

Código

// next/dynamic para componentes pesados
import dynamic from 'next/dynamic'

const Editor = dynamic(() => import('@/components/Editor'), {
  ssr: false,      // editor usa window/document
  loading: () => <Skeleton className="h-64" />
})

const Chart = dynamic(() => import('@/components/Chart'), {
  loading: () => <ChartSkeleton />
})

// React.lazy fora do Next.js
const HeavyModal = React.lazy(() => import('./HeavyModal'))

function App() {
  return (
    <Suspense fallback={<ModalSkeleton />}>
      {isOpen && <HeavyModal />}
    </Suspense>
  )
}

// Analisar bundle:
// ANALYZE=true next build

Perguntas de entrevista

Q.Qual a diferença entre React.lazy e next/dynamic?▾

A.React.lazy é padrão do React mas não suporta SSR. next/dynamic é wrapper do Next.js com suporte a SSR e opção ssr: false para componentes que usam APIs do browser. Para Next.js, sempre use dynamic().

Q.Como evitar layout shift ao fazer lazy loading?▾

A.Definir dimensões fixas no fallback do Suspense (skeleton com mesmo tamanho do componente real). Sem dimensões fixas, o conteúdo "pula" quando o componente carrega, prejudicando CLS.

Q.O que é prefetching e quando usar?▾

A.Pré-carregar chunks de rotas que o usuário provavelmente vai navegar. No Next.js, Link já faz prefetch automático quando o link entra no viewport. Para prefetch manual: router.prefetch("/rota"). Cuidado com over-prefetching em mobile.

Termos relacionados

52/122← →