Conceitos de empacotamento: tree shaking e divisão de código
Entenda como os empacotadores removem exportações não utilizadas por meio de tree shaking e dividem a saída em partes para acelerar o carregamento inicial das páginas.
Conceitos de empacotamento: tree shaking e divisão de código é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que faz um empacotador?
Um empacotador (Vite, webpack, Rollup, Parcel) lê seus arquivos-fonte, resolve importações, transforma o código (transpila, minifica, otimiza) e gera arquivos que o navegador pode carregar com eficiência.
Grafo de módulos
O empacotador começa em um ponto de entrada e segue cada importação para criar um grafo de módulos — um mapa completo de todo o código usado pelo aplicativo. Esse grafo é a base de todas as otimizações.
Eliminação de código não utilizado — remoção de código morto
A eliminação de código não utilizado analisa o grafo de módulos e remove as exportações que nunca são importadas. Apenas importações estáticas de módulos ES permitem essa eliminação — require() do CommonJS é dinâmico e não pode ser analisado estaticamente.
// utils.js
export const add = (a, b) => a + b; // used → included
export const multiply = (a, b) => a * b; // never imported → removed
// app.js
import { add } from './utils.js';
console.log(add(2, 3));Efeitos colaterais e sideEffects: false
Se sua biblioteca não tiver efeitos colaterais (apenas reexportações puras), adicione "sideEffects": false ao package.json. Isso informa aos empacotadores que podem remover com segurança qualquer arquivo do seu pacote que não seja importado.
// package.json of a library:
{
"sideEffects": false
// or list files with side effects:
"sideEffects": ["./src/polyfills.js"]
}Divisão de código
A divisão de código fragmenta o pacote em vários blocos carregados sob demanda. O bloco principal permanece pequeno para um carregamento inicial rápido. Os blocos secundários são carregados somente quando necessário (rotas carregadas sob demanda, alternâncias de funcionalidades).
Divisão de pontos de entrada
Aplicativos multipágina têm vários pontos de entrada, cada um produzindo seu próprio pacote. O código compartilhado (por exemplo, React) é extraído automaticamente para um bloco compartilhado.
Divisão por importação dinâmica
Cada chamada dinâmica de import() cria um ponto de divisão. O empacotador gera um bloco separado para o módulo carregado sob demanda e todas as suas dependências exclusivas.
// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));Divisão de código de fornecedores
O código de node_modules raramente muda. Extraia-o para um bloco de fornecedores com um TTL de cache longo. Usuários que tiverem o bloco de fornecedores armazenado em cache só precisarão baixar novamente o bloco do aplicativo quando houver atualizações.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] }
}
}
}Minificação
Minificadores (esbuild, terser) removem espaços em branco, renomeiam variáveis para letras únicas e aplicam outras reduções. Um aplicativo React típico diminui de 60% a 70% após a minificação.
Hash baseado no conteúdo
Os empacotadores adicionam um hash do conteúdo do arquivo ao nome: index-a1b2c3.js. Quando o conteúdo muda, o hash muda, o nome muda e o navegador busca o novo arquivo. Os blocos inalterados permanecem armazenados em cache indefinidamente.
Mapas de origem
Os mapas de origem associam a saída minificada ao seu código-fonte original. Eles são gerados separadamente (não são enviados aos usuários) e usados pelo DevTools para depuração. Ative-os com build.sourcemap: true.
Verificação rápida
Qual é o principal requisito para que a eliminação de código não utilizado funcione?
Recapitulação: conceitos de empacotamento
Os empacotadores resolvem o grafo de módulos, eliminam exportações não utilizadas (isso requer ESM estático), dividem o código em blocos para carregamento sob demanda, extraem o código de fornecedores para armazenamento em cache, minificam a saída e adicionam hashes de conteúdo para invalidar o cache. Os mapas de origem permitem depurar código minificado.
Perguntas Frequentes
A aula “Conceitos de empacotamento: tree shaking e divisão de código” é grátis?
Sim — o texto completo de “Conceitos de empacotamento: tree shaking e divisão de código” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Conceitos de empacotamento: tree shaking e divisão de código”?
Entenda como os empacotadores removem exportações não utilizadas por meio de tree shaking e dividem a saída em partes para acelerar o carregamento inicial das páginas. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Conceitos de empacotamento: tree shaking e divisão de código”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Módulos ES: import export e importação dinâmica
- npm e package.json: dependências scripts
- Vite: servidor de desenvolvimento e build
- Conceitos de empacotamento: tree shaking e divisão de código