O Que É Tree Shaking? Removendo Código Não Utilizado dos Bundles
Tree shaking é eliminação de código morto no grafo de módulos: o bundler descarta os exports que nada no seu app realmente importa.
Quando você importa uma única função de uma biblioteca grande, você não quer a biblioteca inteira no seu bundle. O tree shaking analisa quais exports são realmente usados e remove o resto. A metáfora é sacudir uma árvore para que as folhas mortas caiam, deixando apenas o código vivo. Ele depende muito de como seu código e suas dependências são escritos.
Por que ele precisa de módulos ES
O tree shaking funciona porque os imports e exports de módulos ES são estáticos e analisáveis em tempo de build. O bundler consegue ver exatamente quais exports são referenciados. Os antigos módulos CommonJS são dinâmicos, então é muito mais difícil provar que o código não utilizado pode ser removido com segurança.
Efeitos colaterais bloqueiam o shaking
Se um módulo faz algum trabalho só por ser importado (por exemplo, registrar um global), o bundler precisa mantê-lo mesmo que seus exports fiquem sem uso. O campo sideEffects no package.json informa ao bundler quais arquivos podem ser descartados com segurança.
O que você ganha com isso
- Bundles menores e carregamentos de página mais rápidos.
- Menor consumo de banda e custo de CDN.
- Menos JavaScript para o navegador analisar e executar.
Quando ele decepciona
Bibliotecas que não são escritas como módulos ES, ou que têm efeitos colaterais amplos, fazem shaking mal. Importar de um barrel file que reexporta tudo também pode trazer mais do que o esperado. Medir o bundle é a única forma de ter certeza.
Tree shaking no CI/CD
O tree shaking roda automaticamente durante a etapa de bundle de produção, então não custa nenhum estágio separado. O que o CI acrescenta é a verificação: uma checagem de bundle-size no pipeline pode fazer um build falhar quando um import acidental infla a saída, detectando regressões antes que cheguem à produção.
Principais conclusões
- O tree shaking remove exports não utilizados, apoiando-se na análise estática de módulos ES.
- Efeitos colaterais impedem a remoção; o campo sideEffects orienta o bundler.
- Uma verificação de bundle-size no CI detecta regressões quando o tree shaking é derrotado.