Code splitting com React.lazy e Suspense

O problema: um bundle gigante

Quando você empacota uma aplicação React, todo o código de todos os componentes acaba em um único arquivo (o bundle). Se a sua app for grande, o navegador precisa baixar, analisar e executar todo esse JavaScript antes de pintar a primeira tela, mesmo que o usuário só vá ver a página inicial.

O code splitting (divisão de código) parte o bundle em pedaços menores que são carregados só quando são necessários. O React facilita isso com duas peças: React.lazy e <Suspense>.

React.lazy: importar um componente de forma diferida

React.lazy recebe uma função que devolve um import() dinâmico. O módulo do componente não é baixado até que o React tente renderizá-lo pela primeira vez:

import { lazy } from "react";

// O código de Painel vive no seu próprio chunk e é baixado sob demanda.
const Painel = lazy(() => import("./Painel"));

O import("./Painel") deve apontar para um módulo com um export default que seja o componente.

Suspense: o que mostrar enquanto carrega

Como o download é assíncrono, há um instante em que o componente ainda não está disponível. <Suspense> define o fallback (um placeholder) que é mostrado enquanto o carregamento é resolvido:

import { lazy, Suspense } from "react";

const Painel = lazy(() => import("./Painel"));

function App() {
  return (
    <Suspense fallback={<p>Carregando…</p>}>
      <Painel />
    </Suspense>
  );
}

• Enquanto Painel é baixado, o usuário vê Carregando….
• Quando termina, o React substitui o fallback pelo componente real.
• Um mesmo <Suspense> pode envolver vários componentes diferidos; ele mostrará o fallback até que todos estejam prontos.

Quando usar

O code splitting brilha em limites naturais: rotas (cada página no seu chunk), modais pesados, editores, gráficos… Qualquer parte que não seja necessária no carregamento inicial. O resultado é uma inicialização mais rápida: o usuário baixa menos JavaScript para ver a primeira tela.

Nota do ambiente: React.lazy e Suspense dependem de carregamento assíncrono de módulos, então nestes exercícios os estudamos em nível conceitual (nos questionários). Os hooks síncronos você praticará com código real.