𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗶𝗻𝗴 𝗘𝘅𝗽𝗹𝗶𝗰𝗮𝗱𝗼

Você escreve aplicativos React ou Angular usando muitos arquivos. Você usa componentes, serviços e bibliotecas.

Os navegadores têm dificuldade com muitos arquivos. Carregar 200 arquivos significa 200 requisições de rede. Isso torna seu aplicativo lento.

Bundlers resolvem isso. Eles pegam seu código e imports e os combinam em um ou poucos arquivos pequenos. Isso torna o carregamento eficiente.

Bundlers modernos fazem mais do que apenas combinar arquivos. Eles realizam estas tarefas:

  • Minificação: Eles removem espaços e comentários. Eles encurtam nomes de variáveis para economizar espaço.
  • Tree shaking: Eles removem o código que você não utiliza.
  • Code splitting: Eles dividem o código em pequenos pedaços (chunks). Os usuários carregam apenas o que precisam.

Arquivos menores levam a aplicativos mais rápidos.

Existem duas ferramentas principais: Webpack e Vite.

O Webpack empacota todo o seu aplicativo antes de servi-lo. É poderoso e flexível. Pode parecer lento em projetos grandes porque reempacota tudo durante as alterações.

O Vite é uma escolha moderna. Ele serve os arquivos diretamente durante o desenvolvimento usando módulos ES nativos. Ele atualiza apenas o arquivo que você altera. Isso torna as atualizações instantâneas.

Comparação:

Webpack:

  • Velocidade de dev: Mais lenta
  • Configuração: Complexa
  • Melhor para: Grandes projetos legados

Vite:

  • Velocidade de dev: Rápida
  • Configuração: Simples
  • Melhor para: Novos projetos modernos

Use Vite para novos projetos.

Todo bundler segue três etapas:

  1. Construir um gráfico de dependências: O bundler mapeia como os arquivos se conectam uns aos outros.
  2. Transformar o código: Ele converte TypeScript ou JSX em JavaScript puro.
  3. Gerar o bundle: Ele escreve os arquivos finais em uma pasta para implantação.

Mantenha seu bundle enxuto com estas dicas:

  • Lazy loading: Carregue componentes apenas quando o usuário precisar deles.
  • Imports específicos: Não importe bibliotecas inteiras. Importe apenas as funções específicas que você utiliza.
  • Analise seu bundle: Use ferramentas para ver quais arquivos ocupam mais espaço.
  • Use builds de produção: Sempre faça o deploy de builds de produção em vez de builds de desenvolvimento.

Bundlers tornam seus aplicativos mais rápidos ao fornecer menos arquivos e menores.

Fonte: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p