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 tamaño del código fuente JavaScript eliminando los caracteres que un navegador no necesita para ejecutarlo, como espacios sobrantes, saltos de línea y comentarios. Después de la minificación, el código hace exactamente lo mismo. Solo cambia el tamaño del archivo.

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

Cómo funciona la minificación de JavaScript

Esta herramienta lee el código un carácter a la vez y lo reconstruye, descartando todo lo que los lectores necesitan pero el motor de JavaScript no. Elimina:

  • Los comentarios, tanto los comentarios // single-line como los /* multi-line */, incluidos los comentarios de estilo JSDoc.
  • Los espacios sobrantes, las tabulaciones y las líneas en blanco que solo existen 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 intactas varias cosas:

  • El texto dentro de cadenas ("like this", 'like this') y de literales de plantilla (`like this`), aunque ese texto contenga espacios o parezca un comentario.
  • Los literales de expresiones regulares, como /[a-z]+/g.
  • Todos los puntos y comas, comas y corchetes que el código original ya tenía.

A veces no se puede quitar un espacio entre dos tokens sin cambiar su significado. return a no puede convertirse en returna, porque se leería como una sola palabra. Cuando quitar un espacio fusionaría dos tokens, la herramienta conserva un único espacio.

Un salto de línea también puede importar. JavaScript a veces inserta un punto y coma automáticamente al final de una línea, una regla llamada inserción automática de punto y coma. Si eliminar un salto de línea pudiera activar o bloquear esa regla, o si el salto de línea sigue a una llave de cierre }, la herramienta conserva un único salto de línea en ese lugar. Por eso el código minificado no siempre queda comprimido en una sola línea: algunos saltos de línea 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. Lea 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.

El procesamiento ocurre en la pestaña del navegador. El código nunca se envía a un servidor.

Ejemplo: minificar 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

Ambos comentarios desaparecen y la sangría ya no está. El punto y coma después de a+b permanece, porque la herramienta nunca borra un punto y coma que ya estuviera allí. El salto de línea antes de const también permanece, porque sigue a una } de cierre.

Ejemplo: minificar 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

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

Límites 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 el código no utilizado ni combina archivos. La minificación completa puede incluir eliminar el código no utilizado y acortar los nombres de variables y funciones. Esas herramientas suelen producir una salida más pequeña, pero requieren un proceso de compilación para ejecutarse. Esta herramienta funciona al instante en el navegador y sin configuración, lo que resulta adecuado para comprobaciones rápidas o fragmentos pequeños, y no para una canalización de producción completa.

Preguntas frecuentes

¿Qué elimina un minificador de JavaScript?

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

¿Minificar JavaScript cambia la forma en que se ejecuta?

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

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

JavaScript puede exigir un salto de línea por su regla de inserción automática de punto y coma, o el salto de línea puede seguir a una llave de cierre }. Eliminarlo podría cambiar lo que hace el código, por lo que la herramienta conserva un único salto de línea en esos lugares en vez de borrarlo.

¿Minificar es lo mismo que comprimir?

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

¿Se envía mi código a un servidor?

No. El minificador se ejecuta por completo en la pestaña del navegador. El código nunca se sube a ningún lugar.

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

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

Referencias

  1. Mozilla Developer Network. Lexical grammar: Automatic semicolon insertion. Gramática léxica de JavaScript — se insertan puntos y comas donde un terminador de línea o } separa tokens que la gramática no permite juntos.
  2. Mozilla Developer Network. Minification. Entrada del glosario sobre minificación — la minificación puede eliminar comentarios, espacios en blanco y código no utilizado, y acortar los nombres de variables y funciones.
  3. Google. Optimizing encoding and transfer size of text-based assets. web.dev: codificación y transferencia — la minificación no es estrictamente compresión; gzip y Brotli son algoritmos de compresión habituales para texto como JavaScript.