¿Qué es Tree Shaking?

Tree shaking es una técnica de eliminación de código muerto que usan los bundlers modernos (Webpack, Rollup, Vite) para detectar y descartar el código JavaScript que se importa pero nunca se usa. El resultado es un bundle más pequeño y eficiente.

¿Para qué se utiliza?

Tree shaking se usa para:

• Reducir el tamaño del JavaScript que se envía al navegador.
• Mejorar el tiempo de descarga y parseo en dispositivos lentos.
• Evitar que librerías grandes penalicen el rendimiento si solo se usa una pequeña parte.
• Optimizar automáticamente el código sin intervención manual del desarrollador.
• Reducir métricas como el Total Blocking Time en Core Web Vitals.

¿Cómo funciona?

Imagina un árbol con muchas ramas. Tree shaking agita el árbol y deja que caigan las ramas muertas — las funciones, clases y variables que se importaron pero nadie llama. El bundler analiza el grafo de importaciones (ES Modules estáticos) y elimina todo lo que no lleva a ningún sitio.

Para que funcione, el código debe usar import/export estáticos de ES Modules. Los require() de CommonJS no son tree-shakeable.

Ejemplo: Sin y con tree shaking

// utils.js — exporta tres funciones
export function sumar(a, b) { return a + b; }
export function restar(a, b) { return a - b; }
export function multiplicar(a, b) { return a * b; } // ← nadie la importa

// main.js — solo importa dos
import { sumar, restar } from './utils.js';

console.log(sumar(2, 3));  // 5
console.log(restar(5, 1)); // 4

// Resultado del bundle con tree shaking:
// ✅ sumar  → incluida
// ✅ restar → incluida
// ❌ multiplicar → ELIMINADA — no se usa, no entra en el bundle

Ejemplo: Tree shaking en librerías grandes

// ❌ Sin tree shaking: importa TODA la librería lodash (~70 KB)
import _ from 'lodash';
const resultado = _.groupBy([1, 2, 3, 4], (n) => n % 2);

// ✅ Con tree shaking: solo importa groupBy (~2 KB)
import groupBy from 'lodash-es/groupBy';
const resultado = groupBy([1, 2, 3, 4], (n) => n % 2);

// Bundlers modernos como Vite hacen esto automáticamente
// cuando la librería exporta ES Modules correctamente

---

Tree shaking es especialmente relevante al usar librerías de componentes UI como Material UI, Ant Design o date-fns. Usar imports específicos en lugar de importar el paquete entero puede marcar una diferencia enorme en el tamaño final del bundle.

---

---