Saltar al contenido
🛠️
Whiz Tools

Minificador de JavaScript - Optimizador de Código JS Gratuito

Herramienta gratuita de minificación de JavaScript para reducir el tamaño del código eliminando espacios en blanco y comentarios. Optimice archivos JS al instante sin necesidad de instalación.

Minificador de JavaScript

Acerca de esta herramienta

Este simple minificador de JavaScript elimina espacios en blanco y comentarios innecesarios para reducir el tamaño de su código. Preserva la funcionalidad mientras hace su código más compacto.

  • Elimina espacios en blanco innecesarios (espacios, tabulaciones, saltos de línea)
  • Elimina comentarios (de una sola línea y multilínea)
  • Preserva literales de cadena y expresiones regulares
  • Mantiene la funcionalidad del código
Calculadora de carga...
📚

Documentación

¿Qué es un minificador de JavaScript?

Un minificador de JavaScript es una herramienta que reduce el código fuente de JavaScript eliminando los caracteres que un navegador no necesita para ejecutarlo, como espacios adicionales, saltos de línea y comentarios. El código sigue haciendo exactamente lo mismo después de la minificación. Solo cambia el tamaño del archivo.

Los archivos JavaScript más pequeños se descargan y cargan más rápido, por lo que la minificación es un paso habitual antes de publicar un sitio web.

Cómo funciona la minificación de JavaScript

Esta herramienta lee el código carácter por carácter y lo reconstruye, eliminando todo lo que necesitan los lectores pero no el motor de JavaScript. Elimina:

  • Comentarios, tanto los comentarios de una sola línea // single-line como los comentarios de varias líneas /* multi-line, incluidos los comentarios de estilo JSDoc.
  • Espacios, tabulaciones y líneas en blanco adicionales que solo sirven para facilitar la lectura del código.

No añade ni elimina nada más. Nunca borra un punto y coma, un paréntesis ni ningún otro carácter que ya estuviera en el código, y nunca inserta signos de puntuación nuevos. También deja intactos varios elementos:

  • El texto dentro de cadenas ("like this", 'like this') y literales de plantilla (`like this`), aunque ese texto contenga espacios o parezca un comentario.
  • Los literales de expresiones regulares, como /[a-z]+/g, junto con todos sus indicadores: d, g, i, m, s, u, v y y.
  • Todos los puntos y coma, las comas y los corchetes que ya tuviera el código original.

A veces no se puede eliminar un espacio entre dos tokens sin cambiar su significado. return a no puede convertirse en returna, porque se interpretaría como una sola palabra. Lo mismo ocurre con los nombres escritos con letras que no pertenecen al alfabeto inglés, por lo que typeof π conserva su espacio. Cuando eliminar un espacio uniría dos tokens, la herramienta mantiene un solo espacio.

Un salto de línea también puede ser importante. JavaScript inserta a veces un punto y coma automáticamente al final de una línea, según una regla llamada inserción automática de puntos y coma. Si eliminar un salto de línea pudiera activar o impedir esa regla, o si el salto aparece después de una llave de cierre }, la herramienta conserva allí un único salto de línea. Por eso el código minificado no siempre queda comprimido en una sola línea: algunos saltos cambian el significado del código y deben permanecer.

Cómo usar este minificador de JavaScript

  1. Pegue el código JavaScript en el cuadro de entrada.
  2. Seleccione «Minificar».
  3. Consulte el resultado en el cuadro de salida, junto con el tamaño original, el tamaño minificado y el porcentaje de reducción.
  4. Seleccione «Copiar» para copiar el código minificado.

La minificación se ejecuta dentro de la pestaña del navegador, por lo que el código no se carga en ningún servidor para procesarlo. La herramienta también copia el código pegado en la dirección de la página, lo que facilita marcar o compartir un resultado. Por tanto, cualquiera que pueda ver esa dirección también puede ver el código.

Ejemplo: minificación de una función

Antes:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Después:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Desaparecen los tres comentarios y la sangría. El punto y coma después de a+b permanece, porque la herramienta nunca elimina un punto y coma que ya estuviera en el código. El salto de línea antes de const también permanece, porque aparece después de una } de cierre.

Ejemplo: minificación de una clase

Antes:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Después:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Se puede observar que queda un salto de línea antes de cada método y antes de la } de cierre de la clase. Todos esos saltos aparecen después de una } de cierre en el código original, por lo que la regla que protege la inserción automática de puntos y coma los conserva. Los puntos y coma dentro de cada método también permanecen.

Fórmula para calcular la reducción de tamaño

La herramienta muestra tres valores debajo del cuadro de salida: el tamaño original, el tamaño minificado y la reducción. Todos los tamaños son recuentos de caracteres, no de bytes. La reducción es un porcentaje redondeado al número entero más cercano:

1reduction = round((1 - minified characters / original characters) x 100)
2

El ejemplo de la función anterior tiene 213 caracteres antes de la minificación y 103 después. Por tanto, 1 - 103 / 213 = 0,5164, que equivale al 51,64 %, y la herramienta muestra el 52 %. El ejemplo de la clase pasa de 515 caracteres a 304, lo que representa el 40,97 %, mostrado como el 41 %.

Limitaciones de este minificador

Esta herramienta solo elimina comentarios y espacios en blanco. A diferencia de herramientas de compilación como Terser o UglifyJS, no cambia el nombre de las variables, no elimina código sin usar ni combina archivos. Esas herramientas suelen producir una salida más pequeña, pero necesitan un proceso de compilación para ejecutarse. Esta herramienta funciona al instante en el navegador y no requiere configuración, por lo que resulta adecuada para comprobaciones rápidas o fragmentos pequeños, no para un proceso completo de producción.

Preguntas frecuentes

¿Qué elimina un minificador de JavaScript?

Elimina los comentarios y los espacios en blanco que no son necesarios para ejecutar el código. No elimina puntos y coma, corchetes ni ningún otro carácter que ya formara parte del código.

¿La minificación de JavaScript cambia su forma de ejecución?

No. El código minificado debería producir los mismos resultados que el original. Solo cambia el formato.

¿Por qué el código minificado todavía tiene saltos de línea a veces?

Un salto de línea puede ser necesario debido a la regla de inserción automática de puntos y coma de JavaScript, o puede aparecer después de una llave de cierre }. Eliminarlo podría cambiar el comportamiento del código, por lo que la herramienta conserva un único salto de línea en esos lugares en vez de eliminarlo.

¿La minificación es lo mismo que la compresión?

No. La minificación elimina caracteres del propio código fuente. La compresión, como gzip o Brotli, codifica el archivo de otra forma para transferirlo por una red. Los sitios web suelen utilizar ambas técnicas conjuntamente.

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

El propio minificador se ejecuta completamente en la pestaña del navegador, y el código no se carga en un servidor para minificarlo. El código pegado se almacena en la dirección de la página para poder compartir o marcar el resultado, por lo que aparece en la barra de direcciones del navegador y en su historial.

¿Se puede recuperar el código original a partir del código minificado?

Un formateador de código puede restaurar los espacios en blanco, pero los comentarios y los nombres originales de las variables y las funciones se pierden, a menos que se haya guardado un mapa de origen independiente.

Referencias

  1. MDN Web Docs. «Minification». Glosario de MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. «ECMAScript Language Specification», sección 12.10, «Automatic Semicolon Insertion». https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. «ECMAScript Language Specification», sección 12.7.1, «Identifier Names». https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. «ECMAScript Language Specification», sección 22.2.6, «Properties of the RegExp Prototype Object» (el conjunto de indicadores d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object