Tamanho bundle: 9 estratégias para reduzir o JS

Um bundle JavaScript pesado é um dos principais vilões da performance web. Ele atrasa a primeira renderização, aumenta o tempo de interação e prejudica o Core Web Vitals. A boa notícia: é possível reduzir o tamanho bundle com técnicas bem estabelecidas, sem precisar reescrever o projeto inteiro. Abaixo, 9 estratégias práticas, da mais impactante à mais incremental.

1. Code splitting por rota

Em vez de enviar um único arquivo com todo o JavaScript da aplicação, divida o bundle por rota. O usuário que acessa a página inicial não precisa carregar o código do painel administrativo. Com React Router ou Vue Router, isso se faz com import() dinâmico. Na prática, a primeira carga pode cair para menos da metade do tamanho original.

2. Tree shaking efetivo

O tree shaking remove código morto, mas só funciona se você importar corretamente. Prefira import { funcao } from 'pacote' em vez de import pacote from 'pacote'. Módulos CommonJS não são árvore-sacudíveis. Verifique se suas dependências são ESM. Em alguns casos, trocar uma biblioteca por uma versão ESM nativa reduz o bundle em dezenas de kilobytes.

3. Remova dependências desnecessárias

Antes de adicionar uma biblioteca, pergunte se você realmente precisa dela. Uma função de formatação de data pode ser substituída por uma função nativa de 5 linhas. Use ferramentas como npm ls e bundlephobia.com para identificar pacotes pesados. Lembre-se: cada dependência adiciona peso, risco de segurança e complexidade.

4. Minificação e compressão

A minificação remove espaços, comentários e renomeia variáveis. A compressão Gzip ou Brotli reduz ainda mais o tamanho transmitido. Em média, o Gzip reduz o JavaScript em 60% a 70%. Habilite a compressão no seu servidor e use o plugin TerserWebpackPlugin para minificar. Essa é uma das mudanças mais simples e com retorno imediato.

5. Carregamento assíncrono de componentes

Componentes que não são visíveis na primeira dobra podem ser carregados de forma assíncrona. Isso vale para modais, abas, carrosséis e qualquer elemento que só apareça após interação. O React.lazy e o Suspense facilitam esse processo. O usuário vê o conteúdo principal mais rápido, e o código secundário chega quando necessário.

6. Use imports dinâmicos para funcionalidades raras

Funcionalidades como gráficos, mapas ou editores de texto são pesadas e raramente usadas na primeira visita. Em vez de incluí-las no bundle principal, carregue-as sob demanda. Um import() dinâmico cria um chunk separado que só é baixado quando o usuário aciona a funcionalidade. Isso pode reduzir o bundle inicial em centenas de kilobytes.

7. Analise o bundle com ferramentas visuais

Você não pode otimizar o que não mede. Use o webpack-bundle-analyzer ou o source-map-explorer para visualizar o que está ocupando espaço. Muitas vezes, uma única dependência responde por 30% do tamanho total. Identificar esses pontos permite decisões informadas sobre substituição ou remoção.

8. Substitua bibliotecas pesadas por alternativas leves

Moment.js, por exemplo, pesa cerca de 70 kB minificado. Day.js faz o mesmo com apenas 2 kB. Lodash pode ser substituído por funções nativas em muitos casos. Antes de trocar, avalie a compatibilidade e a manutenção da alternativa. Uma troca bem feita reduz o tamanho bundle sem alterar o comportamento.

9. Use HTTP/2 e servidores de edge

O HTTP/2 permite múltiplas requisições em paralelo, o que torna viável servir muitos arquivos pequenos em vez de um único bundle gigante. Combinado com code splitting, isso melhora o cache e a entrega. Servidores de edge, como Cloudflare Workers, podem servir chunks estáticos de locais mais próximos do usuário, reduzindo a latência.

Qual estratégia escolher primeiro?

Se o bundle está muito grande, comece pelo code splitting por rota e pela análise visual. Essas duas técnicas trazem o maior retorno com menor esforço. Em seguida, aplique tree shaking e remoção de dependências. Deixe minificação e compressão para depois, pois são mudanças de infraestrutura que beneficiam qualquer projeto.

Perguntas frequentes

O que é tamanho bundle?

É o tamanho total dos arquivos JavaScript que o navegador precisa baixar e executar para renderizar a aplicação. Quanto maior o bundle, mais lento o carregamento e pior a experiência do usuário, especialmente em conexões lentas.

Como medir o tamanho bundle?

Use o painel Network do DevTools, o webpack-bundle-analyzer ou o Lighthouse. O Lighthouse mostra o tamanho do JavaScript e sugere reduções específicas. Monitore o tamanho em cada deploy para evitar regressões.

Code splitting sempre é recomendado?

Sim, para aplicações com múltiplas rotas ou funcionalidades pesadas. Em páginas muito simples, o overhead pode não compensar. Avalie o caso: se o bundle tem menos de 50 kB, o ganho é pequeno.

Tree shaking funciona com qualquer biblioteca?

Não. Ele funciona apenas com módulos ESM. Bibliotecas CommonJS não são árvore-sacudíveis. Verifique a documentação da biblioteca ou use ferramentas como o es-check para confirmar.

Qual a diferença entre minificação e compressão?

Minificação remove caracteres desnecessários do código. Compressão, como Gzip, reduz o tamanho dos dados transmitidos. As duas são complementares e devem ser usadas juntas.

Reduzir o tamanho bundle afeta a funcionalidade?

Não, se feito corretamente. Code splitting e tree shaking removem código não utilizado ou adiam o carregamento, sem alterar o comportamento. Teste após cada mudança para garantir que nada quebrou.