Minificador y Formateador de JavaScript

¿Qué es esta herramienta?

Un minificador de JavaScript reescribe el código para que ocupe el menor espacio posible comportándose de forma idéntica: acorta nombres de variables y funciones cuando es seguro, elimina comentarios y espacios, pliega constantes y elimina código inalcanzable.

Esta herramienta está construida sobre Terser, el minificador basado en AST usado por webpack, Vite, Rollup y la mayoría de las herramientas modernas de compilación de JavaScript. Como realmente analiza tu código en lugar de buscar patrones de texto, distingue correctamente un operador de división de una expresión regular, no rompe template strings que contienen secuencias parecidas a //, y no renombra una variable a un nombre que colisione con algo en un ámbito externo.

¿Por qué utilizarlo?

• Minificación basada en AST (Terser), el mismo motor usado por los principales bundlers — segura con expresiones regulares, template strings y closures.
• Acorta nombres de variables para un ahorro real de tamaño, no solo elimina espacios.
• Muestra exactamente cuántos bytes y qué porcentaje ahorraste.
• El modo Formatear convierte JS minificado y ofuscado en una sola línea de vuelta en código legible con sangría — útil para entender scripts de terceros.
• Procesamiento 100% local — el código propietario nunca sale de tu navegador.

Cómo utilizarlo

1. Pega tu JavaScript en el cuadro de entrada, o haz clic en "Cargar ejemplo" para probar una muestra con una expresión regular y un template string.
2. Haz clic en "Minificar" para comprimirlo, o en "Formatear" para embellecerlo con sangría de 2 espacios.
3. Revisa el mensaje bajo los cuadros — el modo minificar muestra la reducción de tamaño; un error de sintaxis en tu código muestra un mensaje claro en lugar de producir un resultado roto en silencio.
4. Haz clic en "Copiar" para obtener el resultado.

Ejemplo

Entrada

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

Resultado

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

Los nombres de variables se acortan, el comentario y la sentencia if se colapsan en una expresión, pero la expresión regular y el template string se preservan exactamente y el comportamiento no cambia.

Consejos prácticos

• Minifica en el momento de compilar, no editando a mano — mantén el código fuente legible en el control de versiones y genera el paquete minificado como un paso de compilación.
• Si el resultado minificado se comporta de forma inesperada, revisa si hay código que dependa de Function.prototype.name o de reflexión — el acortamiento de nombres renombra funciones y eso puede salir a la luz en casos raros.
• Formatear un script de terceros antes de leerlo es mucho más rápido que intentar analizar una sola línea de 2000 caracteres.
• Combínalo con los minificadores de HTML y CSS de abajo si estás preparando un paquete estático completo para desplegar.

Dónde encaja en flujos de trabajo reales

JavaScript suele ser el recurso más grande que bloquea el renderizado o el análisis en una página, así que minificarlo tiene un efecto real y medible en el tiempo de carga — más que el HTML o CSS byte por byte. La mayoría de los frameworks modernos hacen esto automáticamente al compilar, pero los scripts escritos a mano, extensiones de navegador y bookmarklets a menudo se publican sin minificar a menos que alguien los pase por una herramienta como esta.

El modo Formatear se usa comúnmente al revés: depurar un error de producción a partir de un stack trace minificado es mucho más fácil una vez que el código alrededor está reformateado y es legible, incluso sin los nombres de variables originales.

→ Minificador de HTML · Minificador de CSS

Casos de uso comunes

• Reducir un script independiente o un bookmarklet antes de publicarlo.
• Reformatear un script minificado obtenido de un sitio en vivo para entender qué hace.
• Limpiar JavaScript pegado desde una publicación de foro o un fragmento generado por IA antes de leerlo con cuidado.
• Comprobar rápidamente si un fragmento de JS escrito a mano tiene un error de sintaxis, ya que un fallo de análisis aparece como un mensaje explícito.

Preguntas frecuentes