Cómo reducir el tamaño del bundle de JavaScript en un 70%

La mayoría de las aplicaciones web envían demasiado código. La página promedio carga 1,7 MB de JavaScript. Los desarrolladores solo utilizan el 35% del código que envían.

Los bundles más pequeños mejoran tu velocidad. Mejoras el Largest Contentful Paint y el Time to Interactive.

Sigue estos 10 pasos para reducir su tamaño.

  1. Tree shaking Elimina exports no utilizados. Usa la sintaxis de ES Modules. Añade "sideEffects": false a tu package.json. Esto elimina aproximadamente un 18% del código no utilizado.

  2. Code splitting Divide tu código en fragmentos (chunks) más pequeños.

  3. Dynamic imports Carga el código solo cuando los usuarios lo necesiten. Usa lazy loading para las rutas. Esto puede reducir el tamaño del bundle inicial en un 28%.

  4. Optimización de imágenes Usa transformaciones basadas en URL desde un CDN. Deja de usar SVGs inline de gran tamaño.

  5. Auditoría de dependencias Comprueba el tamaño de los paquetes con npx bundle-phobia. • Usa date-fns (13KB) en lugar de moment.js (67KB). • Usa lodash-es en lugar de lodash. • Usa dayjs (2KB) para fechas sencillas.

  6. Minificación Elimina espacios y caracteres adicionales. La mayoría de los bundlers hacen esto automáticamente.

  7. Compresión Usa Brotli en lugar de Gzip. Brotli es entre un 15% y un 25% más eficiente para reducir el tamaño de los archivos.

  8. Eliminación de código muerto (Dead code elimination) Elimina el código al que la computadora nunca puede llegar.

  9. Lazy loading de componentes Retrasa la carga de las partes de la página que están "below the fold" (fuera de la vista inicial).

  10. Poda de polyfills (Polyfill pruning) Usa @babel/preset-env. Envía solo los polyfills para los navegadores que tus usuarios realmente utilizan.

Deja de cometer estos errores:

  • Enviar builds de desarrollo. Usa siempre NODE_ENV=production.
  • Importar librerías completas. Importa funciones específicas en su lugar.
  • Saltarse el análisis. Usa webpack-bundle-analyzer para ver tus fragmentos más grandes.
  • Olvidar la compresión. Los archivos sin comprimir son 5 veces más grandes que los archivos Brotli.

Sigue tu progreso con estos objetivos:

  • Tamaño total de JS: Menos de 120 KB.
  • LCP: Menos de 2,5s.
  • TTI: Menos de 3,5s.

Prioriza el tree shaking, el code splitting y la auditoría. Estos tres pasos suelen proporcionar una reducción del 50% al 70% en un solo sprint.

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