Minificar JavaScript

Cómo funciona

Pegue su código en el panel izquierdo; la versión minificada aparece en el derecho en un momento. La herramienta analiza el código de verdad y entiende lo que escribió: quita espacios, saltos de línea y comentarios, simplifica construcciones como if (x) { return a; } else { return b; } en return x ? a : b y elimina el código que nunca puede ejecutarse, por ejemplo todo lo que va después de un return. Con el acortado de nombres activo, los nombres locales de una función como total, articulos o costoEnvio pasan a letras sueltas como n, t o e. Los nombres globales que otros scripts podrían llamar, como el nombre de función más externo totalCarrito, se dejan intactos a propósito para que su página siga funcionando. Para quitar los console.log antes de publicar, cambie la segunda opción a Quitar. Los comentarios que empiezan con /*! se conservan siempre. Si el código tiene un error de sintaxis, no se minifica nada: recibe la línea, la columna y el carácter inesperado. La línea de resultado muestra el tamaño antes y después en bytes y el ahorro en porcentaje.

Esta herramienta también se busca como minificar javascript, minificar js online, comprimir javascript, js minify, reducir archivo js, minificador javascript.

¿Qué es Minificación?

Minificar JavaScript es reescribirlo en la forma más corta que siga haciendo el mismo trabajo. Se hace en tres pasos: borrar los caracteres que nadie necesita (espacios, saltos de línea, comentarios), simplificar expresiones (condiciones cortas, quitar código que nunca se ejecuta) y acortar los nombres locales. Un archivo más ligero se descarga y se analiza más rápido, y la página responde antes a toques y clics.

¿Qué es Mangling?

El mangling cambia los nombres de las variables locales y de los parámetros de una función por nombres de una letra: articulos y costoEnvio pasan, por ejemplo, a n y t. Los nombres locales no se ven fuera de su función, así que la operación es segura, y es uno de los mayores ahorros de la minificación. Los nombres globales no se tocan, porque otros scripts y los atributos onclick del HTML pueden usarlos.

Dos trampas al minificar

La primera son los nombres globales. Si un botón de su página llama a onclick="totalCarrito()", ese nombre tiene que sobrevivir a la minificación. Esta herramienta nunca acorta los nombres más externos, solo los locales dentro de las funciones; minificar un archivo de script suelto no rompe las llamadas desde su HTML. Si su código accede a una variable local por su nombre mediante eval o una cadena, el acortado lo romperá; en ese caso desactívelo.

La segunda es la depuración. Cuando el código minificado lanza un error, el navegador señala algo como línea 1, columna 18342, que no dice nada sobre su código fuente. Guarde siempre la fuente sin minificar y publique la copia minificada. La herramienta Formatear JavaScript puede volver legible el código minificado si hace falta, pero los nombres acortados no regresan.

Qué ajuste para cada caso

Script de su propio sitio: acorte los nombres y quite las llamadas a console para el resultado más ligero. Script que va a compartir o depurar después: conserve los nombres; el ahorro es algo menor, pero los mensajes de error siguen siendo útiles.

Esta herramienta minifica un archivo a la vez. No junta varios archivos ni resuelve importaciones de módulos. Los proyectos construidos con webpack o Vite ya minifican durante la compilación; esta página es para scripts sueltos, fragmentos que se pegan en un CMS o en un plugin de WordPress y pruebas rápidas.

Preguntas frecuentes

¿Cómo se minifica un archivo JavaScript?

Pegue el código en el panel izquierdo de esta página. El panel derecho lo muestra sin espacios ni comentarios y con nombres locales más cortos. Cópielo o descárguelo como archivo .min.js; la línea de resultado indica los bytes ahorrados.

¿Minificar puede romper mi código?

Con un script suelto, por lo general no: la herramienta analiza el código, solo aplica cambios que conservan su significado y no acorta los nombres globales que otros scripts podrían llamar. Si el código accede a una variable local por su nombre mediante eval o una cadena, el acortado lo rompe; cambie entonces la opción de nombres locales a No. Pruebe una vez el archivo minificado en su página antes de publicarlo.

¿Qué significa «No se pudo leer el código»?

El código tiene un error de sintaxis: un paréntesis o una comilla que nunca se cierra, o una coma que falta. El mensaje da la línea, la columna y el carácter inesperado en ese punto. Corríjalo y vuelva a pegar el código; la minificación se hace sola.

¿Mi código se envía a algún lugar?

No. El minificador funciona dentro de su navegador; su código no sale de esta página ni se sube a ningún servidor.