DT Dev Tools

JavaScript Minifier — Minificador de JavaScript

Minifica JavaScript con Terser en tu navegador: comprime el código, acorta nombres, elimina llamadas a console y compara el tamaño antes y después.

🔒 Se ejecuta completamente en tu navegador — nada se carga

Drop a .js file here or click to browse — or paste code below

Before: –After: –Saved: –
Advertisement

Cómo funciona la minificación de JavaScript

La minificación hace que JavaScript ocupe menos sin cambiar lo que hace. Esta herramienta usa Terser, un minificador consolidado que analiza tu código y lo convierte en un árbol de sintaxis abstracta, lo transforma y lo vuelve a imprimir sin espacios ni comentarios innecesarios. El paso compress aplica decenas de optimizaciones: elimina código inalcanzable y variables sin usar, sustituye constantes en línea, une declaraciones de variables consecutivas, convierte cuando es posible las sentencias if en expresiones condicionales más cortas y evalúa de antemano las expresiones constantes sencillas. Después, el paso mangle renombra variables locales, parámetros y nombres de funciones con una o dos letras. Los nombres de propiedades y las variables globales no se tocan, así que el comportamiento público de tu código se mantiene.

Los indicadores de tamaño muestran los bytes UTF-8 de la entrada y la salida y el porcentaje ahorrado. El código escrito a mano suele reducirse entre un 40 y un 70 %; el código que ya es compacto o que está dominado por cadenas largas se reduce menos. Recuerda que los servidores suelen volver a comprimir JavaScript con gzip o Brotli, por lo que el ahorro real en la transferencia es menor que la cifra bruta, pero el código minificado se analiza más rápido y consume menos ancho de banda.

Cómo elegir las opciones adecuadas

La opción ECMAScript target indica a Terser qué sintaxis puede usar en la salida. Con ES2020 puede generar funciones flecha, encadenamiento opcional y otras formas modernas; con ES5 evita introducir sintaxis más reciente, aunque no transpila el código moderno que hayas escrito: para eso usa una herramienta como Babel o esbuild. Keep console.* conserva los registros, algo útil en compilaciones de staging. Activa ES module para archivos que usan import/export; además permite acortar los nombres de nivel superior, ya que el ámbito del módulo es privado.

Privado por diseño

El minificador se carga bajo demanda y se ejecuta en local, así que tu código fuente nunca se sube a ningún servidor. Eso lo hace ideal para tareas puntuales, como reducir un script en línea, un bookmarklet o un fragmento para un gestor de etiquetas de terceros. Si Terser detecta un error de sintaxis, el mensaje incluye la línea y la columna para que puedas corregir la entrada. Para los paquetes de producción, mantén la minificación en tu proceso de compilación para que sea reproducible y genera source maps para depurar.

Cómo usar

  1. Añade tu códigoPega JavaScript en el campo de entrada o arrastra un archivo .js a la zona de carga.
  2. Elige las opcionesActiva o desactiva la compresión, el acortamiento de nombres, la eliminación de console, el modo módulo y el target de ECMAScript.
  3. MinificaHaz clic en Minify JavaScript para ver el resultado con el tamaño antes, después y el porcentaje ahorrado.
  4. Copia o descargaCopia el código minificado o descárgalo como archivo .min.js.

Preguntas frecuentes

¿Qué minificador utiliza?
Terser, el minificador de JavaScript predeterminado de webpack y una opción disponible en Vite y Rollup. Se ejecuta por completo en tu navegador.
¿Qué diferencia hay entre compress y mangle?
Compress reescribe el código en una forma equivalente más corta: elimina código muerto, calcula constantes y simplifica expresiones. Mangle renombra variables locales y parámetros de funciones con nombres cortos. Ambas opciones son seguras para código normal y se pueden activar por separado.
¿Por qué han desaparecido mis llamadas a console.log?
Por defecto, el compresor elimina las llamadas console.*, algo habitual en los paquetes de producción. Marca Keep console.* para conservarlas.
¿Cuándo debo activar ES module?
Actívalo si tu archivo usa sentencias import o export. El modo módulo también permite a Terser acortar los nombres de nivel superior, lo cual es seguro en módulos pero puede romper scripts clásicos que exponen variables globales.
Advertisement