O Que É um Bundler? Transformando Muitos Módulos em Poucos Arquivos
Um bundler percorre o grafo de módulos, resolve cada import e emite um pequeno conjunto de arquivos otimizados que um browser pode baixar e executar.
Os apps web modernos são escritos como centenas ou milhares de pequenos módulos, mas enviar tantos arquivos a um browser seria lento. Um bundler lê seu entry point, segue cada import e costura o resultado em um punhado de arquivos de saída. É uma das etapas mais lentas de um pipeline de frontend, o que a torna um alvo primário para cache no CI.
O que um bundler realmente faz
Começando por um entry point, o bundler constrói um grafo de dependências de todos os módulos alcançáveis pelos imports. Em seguida, ele concatena e reescreve esses módulos em arquivos de saída, resolvendo caminhos, embutindo ou referenciando assets e aplicando transformações ao longo do caminho.
Por que o bundling importa para o browser
- Menos requisições de rede do que carregar cada módulo separadamente.
- Código morto pode ser removido, então os usuários baixam menos.
- A saída pode ser dividida em chunks cacheáveis.
- Assets como imagens e CSS recebem fingerprint para cache de longo prazo.
Bundlers comuns
Webpack, Rollup, esbuild, Vite e Parcel todos fazem bundling, mas diferem em velocidade e configuração. esbuild e Vite enfatizam builds de dev rápidos; Rollup enfatiza uma saída limpa de biblioteca; Webpack permanece comum em grandes apps legados.
O artifact de saída
Um bundle de produção costuma ser uma pasta dist/ ou build/ de arquivos de JS, CSS e assets com hash, além de uma entrada HTML. Essa pasta é o artifact deployável que seu pipeline envia para um CDN ou host estático.
Bundling no CI/CD
Em um pipeline, o bundling roda depois da instalação de dependências e antes do deploy. Ele é intensivo em CPU e memória, então se beneficia de cachear node_modules e o cache do bundler entre as execuções. Runners frios sem cache pagam o custo total toda vez.
Mantendo os builds de bundle rápidos
Persistir os caches de dependências e do bundler entre execuções é o maior ganho isolado. Runners gerenciados (como o Latchkey) mantêm esses caches aquecidos, para que a etapa de bundle não comece do zero a cada execução do pipeline.
Principais conclusões
- Um bundler segue os imports a partir de um entry point e emite poucos arquivos otimizados.
- A pasta de saída é o artifact que seu pipeline faz deploy.
- O bundling é lento e sensível a cache, então caches aquecidos importam no CI.