Formateador y Minificador JavaScript

Dos problemas diferentes: formateo y minificación

El formateo y la minificación de JavaScript suenan como opuestos de la misma operación, pero involucran técnicas fundamentalmente diferentes.

El formateo (beautify) es cosmético: añade indentación, normaliza espacios, inserta saltos de línea en límites lógicos. La salida es JavaScript semánticamente idéntico — mismos tokens, mismo comportamiento.

La minificación es compresión semántica: elimina todo el espacio en blanco, renombra identificadores locales a nombres más cortos, elimina rutas de código muertas, colapsa expresiones constantes. La salida es JavaScript funcionalmente equivalente pero los tokens cambian. No puedes revertir la minificación de vuelta a código legible (de ahí la necesidad de source maps).

Esta herramienta usa js-beautify para formatear y Terser para minificar. Son los mejores en su clase para cada rol.

Formateadores basados en AST vs regex

Un formateador basado en regex procesa JavaScript como texto: busca patrones como { seguido de un salto de línea e inserta indentación. Funciona para casos simples pero falla en casos extremos:

• Template literals que contienen { — un regex ingenuo puede insertar indentación dentro de un template string, corrompiendo su contenido.
• Patrones de destructuring — { anidados en const { a: { b } } = obj se malinterpretan.
• Expresiones regulares literales — /[{(]/g parece un bloque de apertura a un parser de texto.

Un formateador basado en AST primero parsea el JavaScript en un Abstract Syntax Tree — una representación estructurada donde cada nodo conoce su tipo (FunctionDeclaration, ArrowFunctionExpression, TemplateLiteral, etc.). Las decisiones de formateo se toman sobre el árbol, no sobre el texto. Los template literals nunca se indentan incorrectamente porque el parser conoce sus límites.

js-beautify usa un enfoque consciente del AST y maneja la sintaxis ES2024 incluyendo optional chaining, nullish coalescing, asignación lógica, await de nivel superior y campos de clase.

Terser: minificación real basada en AST

Terser es el minificador JavaScript estándar para builds web de producción. Es lo que Vite, webpack (via terser-webpack-plugin) y esbuild usan internamente.

Eliminación de espacio en blanco — todo el espacio en blanco, comentarios y saltos de línea insignificantes se eliminan.

Name mangling — los nombres de variables locales se renombran a caracteres únicos o dobles: function calculateTaxableIncome(amount, rate) se convierte en function a(b,c). Esta es la mayor contribución a la reducción de tamaño más allá del espacio en blanco. Los nombres exportados se preservan por defecto porque renombrarlos rompería a los consumidores. El mangle solo aplica a nombres locales en el scope.

Eliminación de código muerto — las ramas no alcanzables se eliminan:

// Antes
if (false) {
  console.log('nunca se ejecuta');
}
const DEBUG = false;
if (DEBUG) { heavyOperation(); }

// Después (Terser con evaluate: true)
// Ambos bloques eliminados completamente

Constant folding — las expresiones que evalúan a una constante en tiempo de parse se colapsan:

const MS_PER_DAY = 24 * 60 * 60 * 1000;
// Se convierte en:
const MS_PER_DAY = 86400000;

Toggle de mangle: cuándo activarlo y cuándo no

La opción mangle renombra identificadores locales. Actívala para bundles de producción en navegadores — es la mayor reducción de tamaño tras la eliminación de espacio en blanco.

Desactiva mangle cuando:

• Minificas código Node.js que usa Function.prototype.name para identificar funciones por nombre en tiempo de ejecución.
• El código usa eval() o new Function() con argumentos de cadena que referencian nombres de variables locales.
• Necesitas que la salida minificada sea depurable sin source maps.

Recuento de bytes antes/después

La herramienta muestra el recuento de bytes de entrada, salida y el porcentaje ahorrado:

| Tipo de código | Ahorro (solo whitespace) | Con mangle | |----------------|--------------------------|-----------| | Librería de utilidades | 20–30% | 50–65% | | Componente React | 25–35% | 45–60% | | Archivo con mucha configuración | 15–20% | 20–30% |

Tree shaking: lo que Terser no puede hacer

Un malentendido común: Terser puede eliminar código muerto dentro de un archivo pero no puede hacer tree shaking entre archivos. El tree shaking — eliminar funciones exportadas que ningún módulo importa — requiere análisis a nivel de bundler (Rollup, Vite, webpack). Terser ve un archivo a la vez y no sabe qué exports se consumen.

Source maps para depuración en producción

El código minificado en producción es ilegible en los stack traces. Los source maps resuelven esto mapeando posiciones de bytes minificados de vuelta a líneas de código fuente originales:

import Terser from 'terser';

const result = await Terser.minify(code, {
  mangle: true,
  compress: true,
  sourceMap: {
    filename: 'app.min.js',
    url: 'app.min.js.map',
  },
});

Sube ambos archivos. El comentario sourceMappingURL al final del archivo minificado apunta a las DevTools hacia el map. Los servicios de monitoreo de errores (Sentry, Datadog) pueden consumir source maps del lado del servidor para mostrar stack frames originales en alertas.

Soporte de sintaxis ES2024

Terser soporta JavaScript moderno hasta ES2024:

• Optional chaining (?.) y nullish coalescing (??)
• Asignación lógica (&&=, ||=, ??=)
• await de nivel superior
• Campos de clase (públicos, privados #field, estáticos)
• using / await using (Explicit Resource Management)

Alternativas más rápidas: SWC y esbuild

Para pipelines de build donde la velocidad importa más que la compresión máxima:

• esbuild (Go) — 10–100× más rápido que Terser, buena minificación para la mayoría de apps.
• SWC (Rust) — usado por Next.js y Parcel, muy rápido.

Para una herramienta de un solo uso en navegador, la velocidad no es el cuello de botella — la optimización más agresiva de Terser es preferible.

Privacidad

Todo el procesamiento de JavaScript se ejecuta en tu navegador. Tu código nunca se transmite a un servidor.

¿Cuál es la diferencia entre embellecer y minificar?

Embellecer es cosmético: añade indentación, normaliza espacios e inserta saltos de línea para que el código sea legible. Los tokens JavaScript no cambian y el comportamiento de ejecución es idéntico. Minificar es compresión: elimina el espacio en blanco, renombra variables locales a nombres más cortos y elimina código muerto. La salida es funcionalmente equivalente pero los tokens cambian y el código es intencionalmente ilegible. La minificación es una transformación unidireccional — no puedes recuperar los nombres de variables originales sin un source map.

¿Por qué esta herramienta usa Terser para minificar en lugar de solo eliminar espacios en blanco?

La sola eliminación de espacio en blanco ahorra un 15–25% del tamaño del archivo. La minificación completa de Terser (espacio en blanco + name mangling + constant folding + eliminación de código muerto) ahorra un 45–65% para código de aplicación típico. La diferencia está en el name mangling: renombrar calculateMonthlyInterestRate a a en todo un archivo produce ahorros sustanciales porque los identificadores aparecen muchas veces. Terser usa un parser AST real para renombrar de forma segura solo los identificadores locales, nunca los nombres exportados o globales.

¿Qué significa "mangle"?

El mangling renombra variables locales, parámetros de funciones y nombres de funciones internas a los identificadores más cortos posibles — típicamente caracteres únicos. function processUserInput(rawValue, options) se convierte en function a(b,c). Los exports y globales se preservan porque renombrarlos rompería a los consumidores. Activa mangle para bundles de producción en navegadores; desactívalo si tu código inspecciona Function.prototype.name en tiempo de ejecución o usa eval() referenciando nombres de variables locales como cadenas.

¿Puede Terser eliminar funciones no usadas de una librería?

Solo dentro de un solo archivo. Terser elimina código muerto que puede probar que es inalcanzable — p.ej., bloques if (false) { ... }, constantes que evalúan a falsy. No realiza tree shaking entre archivos (eliminar funciones exportadas que ningún módulo importa). Eso requiere análisis a nivel de bundler de Rollup, Vite o webpack. Para eliminar exports no usados de una librería, usa un bundler con un punto de entrada apropiado.

¿La minificación funciona correctamente con la sintaxis JavaScript moderna?

Sí. Terser soporta hasta ES2024 incluyendo optional chaining (?.), nullish coalescing (??), asignación lógica (&&=, ||=, ??=), campos privados de clase (#field), await de nivel superior y la propuesta de Explicit Resource Management (using). Establece ecma: 2024 en las opciones de Terser para optimizaciones específicas de sintaxis moderna.

¿Por qué el código embellecido a veces difiere de la salida de Prettier?

js-beautify y Prettier toman diferentes decisiones de estilo. Prettier es dogmático y produce un único formato canónico sin configuración. js-beautify es configurable y puede diferir en cosas como el espaciado de objetos, el espaciado de argumentos de funciones o el estilo de llaves. Para un proyecto con una configuración de Prettier, ejecuta Prettier en su lugar. Usa esta herramienta para formateo rápido puntual cuando no quieres instalar nada.

¿Cómo depuro errores de producción en JavaScript minificado?

Genera un source map durante la minificación y súbelo a tu servicio de monitoreo de errores (Sentry, Datadog, Bugsnag) o alójalo junto al archivo minificado. El source map codifica el mapeo desde cada posición de carácter minificado de vuelta a la línea y columna fuente original. Las DevTools del navegador y los servicios de monitoreo de errores usan automáticamente los source maps para mostrar stack traces y archivos fuente originales al depurar.

¿Mi código JavaScript se envía a un servidor?

No. Tanto js-beautify como Terser se ejecutan completamente en tu navegador compilados a WebAssembly y JavaScript. Ningún código se transmite a ningún servidor. Esto aplica incluso a código privado, utilidades internas o lógica de aplicación propietaria — nada sale de tu dispositivo.