O Que É um Module Bundler? Resolvendo o Grafo de Imports
Um module bundler resolve a teia de imports entre seus arquivos e dependências e então emite uma saída combinada que um browser pode carregar.
O JavaScript tem vários sistemas de módulos, e os browsers historicamente não conseguiam carregar uma árvore profunda de módulos de forma eficiente. Um module bundler resolve todos esses imports em tempo de build e produz uma saída que o browser consegue rodar. Embora bundler e module bundler sejam frequentemente usados de forma intercambiável, a ênfase aqui está em como ele entende e reconcilia diferentes formatos de módulo.
Formatos de módulo que ele reconcilia
- ES modules com import e export estáticos.
- CommonJS com require e module.exports.
- UMD e outros formatos legados de interoperabilidade.
Resolvendo o grafo
O bundler começa em um entry point e segue cada import, resolvendo cada specifier para um arquivo usando regras de extensões, campos de entry do pacote e aliases. O resultado é um grafo completo de módulos a incluir.
Por que o formato de módulo importa
ES modules estáticos permitem que o bundler faça tree shaking e produza uma saída menor. O CommonJS dinâmico é mais difícil de analisar, então misturar formatos pode limitar as otimizações. Muitos problemas de build remontam a uma dependência que envia o formato errado.
Módulos nativos vs bundling
Os browsers agora conseguem carregar ES modules diretamente, e os dev servers usam isso para uma inicialização rápida. Mas a produção ainda se beneficia do bundling para reduzir requisições e aplicar otimizações, então o bundler permanece central no build.
Module bundling no CI/CD
A resolução de módulos depende da árvore exata de dependências, então um lockfile comitado mantém o CI resolvendo os mesmos módulos a cada execução. Cachear o grafo resolvido e a instalação de dependências acelera os rebuilds; sem isso, um runner frio re-resolve tudo do zero.
Principais conclusões
- Um module bundler resolve o grafo de imports entre ES modules e CommonJS.
- ES modules estáticos permitem otimizações que os formatos dinâmicos limitam.
- Um lockfile comitado mantém a resolução de módulos do CI reproduzível.