Bundle JavaScript pesado: como descobrir quem está engordando o seu site

No celular de entrada, cada megabyte de JavaScript leva segundos para ser baixado, interpretado e executado. Antes de otimizar código, descubra o que está dentro do pacote — quase sempre há surpresas.

Enxergue o bundle

Ferramentas como rollup-plugin-visualizer (Vite) ou @next/bundle-analyzer geram um mapa visual de cada arquivo e do peso de cada biblioteca. Em cinco minutos, você vê quem ocupa mais espaço.

Os suspeitos de sempre

• Bibliotecas de data completas com todos os idiomas.
• Pacotes de ícones importados inteiros para usar dez ícones.
• Utilitários genéricos importados por completo.
• Bibliotecas de UI carregando componentes que você não usa.
• Gráficos, mapas, editores e 3D no pacote principal.
• Polyfills para navegadores que ninguém mais usa.

Soluções

1. 1.Importe só o necessário: import debounce from 'lodash/debounce', não a biblioteca inteira.
2. 2.Troque por alternativas leves — ou pela API nativa do navegador (Intl para datas e números).
3. 3.Divida por rota e carregue o pesado sob demanda (Code splitting por rota no React: carregue só o que a página precisa).
4. 4.Remova dependências mortas.
5. 5.Defina um orçamento de tamanho por rota e falhe o build se passar.

Scripts de terceiros contam

Chat, pixels, mapas de calor e testes A/B também competem pela thread principal e pioram o INP (INP: o que fazer quando cliques e toques demoram para responder). Carregue-os depois da interação inicial.

O mesmo raciocínio vale para apps React Native (App demora para abrir? Onde investigar o tempo de inicialização).

Veja Performance WPO da We Codex ou fale com a gente.