Al desarrollar aplicaciones con JavaScript, es fácil acumular más código del que realmente se usa. Sobretodo por la facilidad al importar librerías de las cuales sólo acabamos usando una pequeña parte de ellas y no siempre en todas las páginass. Esto se traduce en archivos más pesados que los navegadores deben descargar y ejecutar. El tree shaking, es una técnica que nos permite eliminar automáticamente el código muerto durante el proceso de empaquetado.

Este concepto se volvió más conocido gracias a Rollup, pero hoy en día también lo encontramos en herramientas como Webpack y Vite. ¿Cómo funciona? ¿Qué limitaciones tiene? ¿Qué deberíamos tener en cuenta cuando escribimos nuestro código para que se beneficie de esto? Vamos por partes.

¿Qué es exactamente el tree shaking?

Tree shaking es una metáfora que viene de imaginar nuestro código como un árbol. Al “sacudir” ese árbol, las hojas (funciones, variables, clases) que no están conectadas al resto (es decir, que no se usan) se desprenden y desaparecen del resultado final.

La clave aquí es que el empaquetador debe poder detectar qué partes del código se usan y cuáles no. Esto es posible gracias al sistema de módulos ES6, gracias a la sintaxis import y export. Si todo está bien estructurado, la herramienta puede eliminar automáticamente los fragmentos no utilizados.

Veamos un ejemplo:

export function suma(a, b) {
  return a + b;
}

export function multiplica(a, b) {
  return a * b;
}

import { suma } from './utils.js';

console.log(suma(2, 3));

En este caso, si usamos Rollup o Webpack (con modo producción), la función multiplica no aparecerá en el bundle final, porque nunca se usa. Estos nos permite aligerar el código que se envía al cliente.

Qué hace posible el tree shaking

No todo el código es elegible para ser eliminado. Hay algunas condiciones que deben cumplirse para que funcione correctamente:

• Uso de módulos ES6: Es obligatorio. Si usamos require y module.exports (CommonJS), el análisis estático se complica y el tree shaking suele fallar.
• Código estático y predecible: El empaquetador analiza el código sin ejecutarlo. Si usamos expresiones dinámicas o estructuras complejas, puede no detectar qué se está usando realmente.
• Efectos secundarios invisibles: Si un archivo tiene efectos colaterales al ser importado (como modificar el DOM o el prototipo global), el empaquetador puede decidir mantenerlo por precaución, a menos que se le diga lo contrario.

Herramientas que hacen tree shaking

Actualmente, casi todos los bundlers modernos lo soportan, pero con matices distintos. Una comparación rápida:

• Rollup: lo hace muy bien; fue diseñado con este objetivo desde el inicio. Ideal para librerías.
• Webpack: desde la versión 2 soporta tree shaking, pero requiere ciertas configuraciones (como el modo producción y sideEffects: false en package.json).
• Vite: usa Rollup internamente para producción, así que hereda su capacidad.

Un detalle importante: aunque la herramienta haga su trabajo, si nosotros no escribimos los módulos de forma adecuada, poco se podrá eliminar.

Conclusión

Tree shaking es una técnica muy útil que elimina automáticamente el código que no usamos en nuestros proyectos JavaScript. Gracias a ella, nuestras aplicaciones pueden cargar más rápido y consumir menos recursos. Pero para que funcione, necesitamos estructurar nuestros módulos pensando en ello, evitar efectos colaterales innecesarios y usar herramientas modernas de empaquetado.