La minificación de JavaScript suele confundirse con la ofuscación, aunque son dos tareas distintas con objetivos diferentes: una ahorra bytes, la otra dificulta entender la lógica del código.
Qué hace la minificación
Un minificador elimina espacios, comentarios y saltos de línea, y acorta los nombres de variables locales a uno o dos caracteres allí donde es seguro hacerlo. La lógica del programa permanece completamente intacta: es una compresión puramente técnica del archivo.
De JSMin a Terser: una historia breve
Douglas Crockford publicó JSMin a principios de los años 2000, uno de los primeros minificadores de JavaScript de uso extendido: eliminaba espacios y comentarios, pero no tocaba los nombres de las variables. Herramientas modernas como Terser (un fork de UglifyJS) o esbuild van más allá: analizan el código como un AST y renombran variables locales y parámetros de función a una sola letra siempre que sea seguro, algo que reduce el tamaño mucho más que quitar solo espacios en cualquier proyecto de tamaño real.
Source maps: cómo depurar código con nombres cambiados
Cuando los nombres de variable se reducen a a, b y c y desaparecen los saltos de línea, un error en producción señala una posición ilegible dentro de una única línea gigante. Un source map resuelve esto: es un archivo aparte que asocia cada posición del código minificado con su línea, columna y nombre de variable originales, para que las DevTools del navegador muestren una pila de llamadas legible aunque el navegador esté ejecutando en realidad el archivo minificado.
Para qué sirve esto
- Reducir el tamaño de un bundle de JS antes de desplegarlo en producción.
- Acelerar la descarga y el análisis del script en el navegador.
- Entender por qué el código minificado se puede leer si uno quiere, mientras que el ofuscado resulta mucho más difícil de interpretar.
Tree shaking frente a minificación
El tree shaking es una técnica distinta que no debe confundirse con la minificación: analiza el grafo de dependencias entre módulos y elimina por completo del bundle final las funciones y exportaciones que no se usan en ningún sitio, ya durante el proceso de build. La minificación, en cambio, trabaja sobre código ya terminado y solo acorta su representación textual. Los bundlers modernos como Vite o webpack suelen aplicar ambas técnicas de forma secuencial: primero el tree shaking elimina el código muerto, luego la minificación comprime lo que queda.