O que é Tree Shaking – Glossário de Desenvolvimento
Tree Shaking é uma técnica de otimização usada por bundlers como Webpack, Rollup e esbuild para eliminar código morto ou não utilizado do bundle final. O nome vem da analogia de sacudir uma árvore para que folhas mortas caiam.
O que é Tree Shaking?
Tree Shaking funciona analisando as declarações de import e export do módulo ES6 (ESM). Código que é importado mas nunca utilizado é identificado e removido durante o processo de build. Para funcionar corretamente, o código deve usar módulos ES6 estáticos (import/export) e não CommonJS (require).
Por que Tree Shaking é importante?
Com Tree Shaking, bundles de produção podem ser reduzidos em 30% a 60% de tamanho, resultando em carregamento mais rápido para o usuário final. É uma técnica essencial em aplicações modernas que utilizam bibliotecas como lodash, moment.js e ant-design, onde apenas funções específicas são importadas.
Como usar Tree Shaking na prática?
Para aproveitar Tree Shaking, importe apenas o necessário: import { debounce } from 'lodash-es' em vez de import _ from 'lodash'. Configure o sideEffects no package.json: { 'sideEffects': false } e use module bundlers que suportem a técnica nativamente.
Somos afiliados da Amazon, HubSpot, Envato, CapCut, Shopify e outras aqui, a cada compra ou assinatura aqui ganho uma pequena comissão, e isso me ajuda a continuar compartilhando conhecimento com você de forma gratuita. Muito obrigado por sua contribuição!
Precisa de ajuda com O que é Tree Shaking – Glossário de Desenvolvimento?
Nossa consultoria especializada pode ajudar você a dominar este e outros conceitos para escalar seu negócio.
Falar com um Especialista