Minificar JavaScript _

Cómo funciona la minificación de JavaScript

Terser trabaja en cuatro etapas sobre el Árbol de Sintaxis Abstracta de tu código. Cada etapa es independiente, por lo que puedes activar o desactivar cualquiera de ellas sin romper las demás.

1. Análisis. Terser analiza tu JavaScript en un AST. Cualquier error de sintaxis aparece aquí con el token y la línea que lo causó, para que encuentres el problema real antes de que se ejecute cualquier transformación. El analizador acepta todos los constructos ECMAScript estándar hasta las últimas propuestas en fase 4.
2. Compresión. El compresor recorre el AST y aplica docenas de transformaciones que preservan la semántica: plegado de constantes, eliminación de ramas muertas, inlining de funciones puras cortas, colapso de declaraciones var secuenciales y reescritura de formas equivalentes de sentencias (if/else en ternarios, acortamiento de cadenas de comparación, colapso de retornos condicionales). Cada transformación es reversible en principio; el compresor nunca cambia el comportamiento observable.
3. Mangling. El mangler renombra los enlaces locales con los identificadores únicos más cortos (a, b, c, …) dentro de cada ámbito. Solo se renombran los nombres que no pueden escapar del límite del módulo, por lo que los enlaces exportados, las claves de propiedad y las referencias globales sobreviven intactos. El resultado es el mayor ahorro único de bytes de cualquier etapa.
4. Renderizado. Terser imprime el AST transformado de vuelta a una cadena JavaScript con espacios colapsados y separadores de sentencias reducidos al mínimo que acepta la gramática. Los comentarios se eliminan a menos que el interruptor de preservar licencias mantenga los bloques /*! … */, que la mayoría de las licencias de CDN requieren conservar.

Por qué minificar JavaScript

• Cargas de página más rápidas. Los scripts más pequeños se analizan y ejecutan antes. En una conexión móvil 4G, una reducción del 40 por ciento en bytes recorta segundos reales del Time to Interactive, que es la métrica que Google PageSpeed Insights mide de forma más agresiva.
• Menores facturas de egress de CDN. CloudFront, Cloudflare y Fastly cobran por gigabyte de egress. Una reducción del 40 por ciento en scripts a través de millones de visitas mensuales se acumula en ahorros reales antes de que llegue cualquier trabajo de imágenes o CSS. La matemática se mantiene incluso después de gzip y brotli — la minificación elimina tokens que el compresor de otro modo tendría que codificar.
• Este minificador no penaliza tu página. Terser ocupa ~1 MB sin comprimir. La mayoría de los minificadores en línea envían toda la biblioteca al cargar la página, lo que hunde su propia puntuación en Lighthouse y hace que la página se sienta lenta antes de que el usuario escriba algo. Esta página carga Terser de forma diferida solo cuando haces clic en Minificar o activas el modo en vivo — así el renderizado inicial se mantiene por debajo de los umbrales de Core Web Vitals que la propia herramienta promete ayudarte a alcanzar.
• Superar los Core Web Vitals. Lighthouse y PageSpeed Insights señalan el JavaScript grande como contribuyente directo a un Total Blocking Time deficiente. Minificar las bibliotecas de vendor y los bundles de aplicación es la ganancia más rápida en las auditorías de Lighthouse "Reducir JavaScript no utilizado" y "Eliminar módulos duplicados" — normalmente una reducción de un solo paso que vale diez o veinte puntos.

Aplicaciones comunes

La minificación de JavaScript aparece en casi todas las etapas de un proyecto web moderno.

• Hooks de pre-commit: minifica scripts de utilidad individuales antes de hacer commit en un repositorio para que el artefacto confirmado esté listo para producción y el diff muestre cambios de lógica en lugar de ruido de espacios en blanco.
• Auditorías de widgets de terceros: pega el snippet de incrustación de un proveedor y comprueba si ya está minificado o si puede reducirse más antes de servirlo a millones de usuarios.
• Limpieza de scripts heredados: comprime plugins de jQuery antiguos y scripts escritos a mano que son anteriores a tu pipeline de compilación actual, sin tocar el árbol de fuentes.

Un ejemplo práctico

Toma una pequeña función: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — unos 130 bytes incluyendo el comentario. Pégala arriba con Mangle y Compress ambos activados. La salida se acorta a aproximadamente function add(n,o){return n+o}console.log(add(1,2)); — unos 55 bytes, una reducción del 58 por ciento. El nombre de la función add sobrevive porque se referencia en la llamada console.log; los nombres de los parámetros firstNumber y secondNumber se acortan a letras individuales porque son locales al cuerpo de la función. Desactiva Mangle para mantener nombres de parámetros legibles mientras aún colapsa los espacios y elimina el comentario.

FAQ

¿Esto se ejecuta en mi navegador?

Sí. Terser se carga de forma diferida la primera vez que haces clic en Minificar o activas el modo en vivo — unos 200 KB comprimidos llegan a la caché de tu navegador, y luego no se descarga nada más. Tu código nunca abandona la página.

¿Qué es el mangling de nombres y es seguro?

El mangling renombra las variables locales a letras individuales para ahorrar bytes. Es seguro para scripts autocontenidos y bundles IIFE porque los renombres nunca salen del ámbito. NO es seguro para scripts que exponen globales por nombre (p. ej. window.myLib = …) sin un wrapper. Desactiva Mangle cuando no estés seguro.

¿Por qué se rompió mi código después de la minificación?

Tres sospechosos habituales: eval o with referenciando variables por cadena; lecturas de Function.name o arguments.callee que dependen del identificador original; o globales expuestos por un nombre que fue renombrado. Desactiva Mangle primero para aislar si el renombrado o una transformación de Compress es la causa.

¿Admite sintaxis moderna (ES2020+)?

Sí. Establece el objetivo ECMAScript en ES2020 o Next y Terser preserva el encadenamiento opcional, la coalescencia nula, el await de nivel superior y los operadores de asignación lógica. Establécelo en ES5 y Terser hace down-compila donde puede, pero no es un transpilador completo — usa Babel para la sintaxis que ES5 no puede representar en absoluto.

La minificación de JavaScript en el navegador con Terser te da una salida de calidad de producción sin añadir una herramienta de compilación. Pega un script, elige el objetivo ECMAScript, copia o descarga el resultado. Nada se sube, sin cuenta, sin pipeline de compilación. El minificador solo se carga cuando lo pides — así abrir esta página te cuesta unos pocos kilobytes, no un megabyte.