¿Qué es un Bundler?

Un bundler (empaquetador) es una herramienta de desarrollo que analiza todas las dependencias de un proyecto — archivos JavaScript, CSS, imágenes, fuentes — y las combina y optimiza en uno o varios archivos listos para ser servidos en producción. Los más usados son Vite, Webpack y Rollup.

¿Para qué se utiliza?

Los bundlers se usan para:

• Transformar código moderno (ES Modules, TypeScript, JSX) en algo que los navegadores entienden.
• Combinar cientos de archivos en pocos bundles para reducir peticiones HTTP.
• Minificar y comprimir el código eliminando espacios, comentarios y nombres largos.
• Aplicar tree shaking para eliminar código no utilizado.
• Gestionar assets (imágenes, fuentes, CSS) como parte del grafo de dependencias.
• Generar source maps para depurar código en producción.

¿Cómo funciona?

Imagina un bundler como un montador de muebles con instrucciones perfectas. Recibe todas las piezas sueltas de tu proyecto (módulos, componentes, estilos), lee cómo encajan entre sí siguiendo los import/require, y ensambla un paquete compacto y ordenado. Lo que antes era un cajón lleno de piezas, sale como un mueble terminado.

Ejemplo: Configuración básica de Vite

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],

  build: {
    outDir: 'dist',         // Carpeta de salida
    minify: 'esbuild',      // Minificador
    sourcemap: true,        // Genera source maps para debugging

    rollupOptions: {
      output: {
        // Code splitting: separa las dependencias del código propio
        manualChunks: {
          vendor: ['react', 'react-dom'], // Bundle separado para librerías
        },
      },
    },
  },
});

Ejemplo: Lo que hace un bundler por ti

Antes del bundle (desarrollo):         Después del bundle (producción):
─────────────────────────────          ─────────────────────────────────
src/
  main.jsx          (3 KB)             dist/
  components/         │                  index.html           (2 KB)
    Header.jsx      (2 KB)    ──────▶    assets/
    Footer.jsx      (1 KB)               main.a3f9c2.js      (28 KB, minificado)
    Card.jsx        (1 KB)               vendor.b8d1e5.js    (142 KB, librerías)
  styles/                               styles.c4a2b1.css    (4 KB, minificado)
    global.css      (8 KB)
    card.css        (2 KB)
  utils/
    helpers.js      (1 KB)
node_modules/
  react/          (120 KB)    → Solo el código usado
  react-dom/      (900 KB)    → Solo el código usado

---

Durante el desarrollo, los bundlers modernos como Vite usan ES Modules nativos del navegador para ofrecer un servidor con recarga casi instantánea (HMR). El bundling “real” solo ocurre al hacer build para producción.

---

---