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

Escribes aplicaciones de React o Angular utilizando muchos archivos. Utilizas componentes, servicios y librerías.

Los navegadores tienen dificultades con muchos archivos. Cargar 200 archivos significa 200 solicitudes de red. Esto hace que tu aplicación sea lenta.

Los bundlers solucionan esto. Toman tu código y tus importaciones y los combinan en uno o unos pocos archivos pequeños. Esto hace que la carga sea eficiente.

Los bundlers modernos hacen más que solo combinar archivos. Realizan estas tareas:

  • Minificación: Eliminan espacios y comentarios. Acortan los nombres de las variables para ahorrar espacio.
  • Tree shaking: Eliminan el código que no utilizas.
  • Code splitting: Dividen el código en fragmentos (chunks) pequeños. Los usuarios solo cargan lo que necesitan.

Archivos más pequeños dan lugar a aplicaciones más rápidas.

Existen dos herramientas principales: Webpack y Vite.

Webpack empaqueta toda tu aplicación antes de servirla. Es potente y flexible. Puede sentirse lento en proyectos grandes porque vuelve a empaquetar todo durante los cambios.

Vite es una opción moderna. Sirve los archivos directamente durante el desarrollo utilizando módulos ES nativos. Actualiza solo el archivo que cambias. Esto hace que las actualizaciones sean instantáneas.

Comparación:

Webpack:

  • Velocidad de desarrollo: Más lenta
  • Configuración: Compleja
  • Ideal para: Proyectos grandes heredados (legacy)

Vite:

  • Velocidad de desarrollo: Rápida
  • Configuración: Simple
  • Ideal para: Proyectos modernos nuevos

Usa Vite para proyectos nuevos.

Cada bundler sigue tres pasos:

  1. Construir un grafo de dependencias: El bundler mapea cómo se conectan los archivos entre sí.
  2. Transformar el código: Convierte TypeScript o JSX en JavaScript puro.
  3. Generar el bundle: Escribe los archivos finales en una carpeta para su despliegue.

Mantén tu bundle ligero con estos consejos:

  • Lazy loading: Carga los componentes solo cuando el usuario los necesite.
  • Importaciones específicas: No importes librerías completas. Importa solo las funciones específicas que utilices.
  • Analiza tu bundle: Utiliza herramientas para ver qué archivos ocupan más espacio.
  • Usa builds de producción: Despliega siempre builds de producción en lugar de builds de desarrollo.

Los bundlers hacen que tus aplicaciones sean más rápidas al proporcionar menos archivos y más pequeños.

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