𝗖𝗼𝗺𝗼 𝗥𝗲𝗱𝘂𝘇𝗶𝗿 𝗼 𝗧𝗮𝗺𝗮𝗻𝗵𝗼 𝗱𝗼 𝘀𝗲𝘂 𝗕𝘂𝗻𝗱𝗹𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗲𝗺 𝟳𝟬%

A maioria das aplicações web envia código demais. Uma página web média carrega 1,7 MB de JavaScript. Os desenvolvedores utilizam apenas cerca de 35% do código que implantam.

Bundles pequenos melhoram seus Core Web Vitals. Você obtém pontuações mais rápidas de Largest Contentful Paint e Time to Interactive.

Siga estes 10 passos para diminuir o tamanho do seu bundle:

  • Tree shaking: Remove código não utilizado. Use a sintaxe ES Module para que isso funcione.
  • Code splitting: Divide seu código em partes menores.
  • Dynamic imports: Carregue o código apenas quando o usuário precisar dele.
  • Otimização de imagens: Use transformações baseadas em URL em vez de bibliotecas grandes.
  • Auditoria de dependências: Substitua bibliotecas pesadas por bibliotecas leves.
  • Minificação: Reduza o tamanho dos seus arquivos de código.
  • Compressão: Use Brotli para obter melhores resultados do que o Gzip.
  • Eliminação de código morto: Remova ramificações de código inacessíveis.
  • Lazy loading: Adie o carregamento de componentes não críticos.
  • Poda de polyfills: Envie apenas os polyfills que seus usuários precisam.

Três técnicas funcionam melhor juntas. Lazy loading, poda de polyfills e eliminação de código morto podem reduzir seu tamanho em 15-30%.

Audite suas dependências antes de instalá-las. Use npx bundle-phobia para verificar os tamanhos.

Por exemplo: • date-fns (13KB) é melhor que moment.js (67KB). • dayjs (2KB) é uma ótima alternativa para formatação de datas. • Use lodash-es em vez da biblioteca lodash completa.

Acompanhe seu progresso com estas metas: • Tamanho total do JS: Tente manter abaixo de 120 KB. • LCP: Tente manter abaixo de 2,5s. • TTI: Tente manter abaixo de 3,5s.

Evite estes erros: • Implantar builds de desenvolvimento em vez de builds de produção. • Importar bibliotecas inteiras quando você precisa de apenas uma função. • Esquecer de habilitar a compressão Brotli no seu servidor.

Se você usar tree shaking, code splitting e auditoria de dependências, poderá reduzir seu payload em 50-70% em um único sprint.

Fonte: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g