Mis herramientas

Minificar JS y CSS

Pega código y la versión minificada aparece mientras escribes, con los caracteres ahorrados.

Cómo se usa

  1. Pega JavaScript o CSS en la caja: la versión minificada aparece mientras escribes, sin ningún botón que pulsar.
  2. Deja la sintaxis en Automática, o elige JavaScript / CSS si la detección se ha equivocado; el resultado se vuelve a generar al instante.
  3. La cabecera muestra los caracteres ahorrados antes → después. Copia la salida o descárgala como archivo .js / .css.

Ejemplo

Entrada

// Total del carrito con la insignia de envío gratis
const TAX = 0.08;

function total(items, coupon) {
  let sum = 0;
  for (const item of items) {
    sum += item.price * item.qty;
  }
  if (coupon) {
    sum -= coupon;
  }
  return { amount: sum * (1 + TAX), freeShipping: sum > 50 };
}

Minificado

const TAX=0.08;function total(items,coupon){let sum=0;for(const item of items){sum+=item.price*item.qty;}if(coupon){sum-=coupon;}return{amount:sum*(1+TAX),freeShipping:sum>50};}

El comentario desaparece y el espacio se reduce, pero cada identificador conserva su nombre y cada literal su grafía exacta. La lectura indica 279 → 177 caracteres (−37 %).

Reglas, límites y problemas conocidos

  • Solo espacios en blanco y comentarios. No se renombra nada, no se pliega ninguna instrucción y no se elimina código, así que la salida minificada se comporta como el original, pero ocupa más que la de Terser.
  • Se conservan los comentarios que empiezan por /*! o //! y los que mencionan @license o @preserve; el resto se elimina.
  • Los saltos de línea se mantienen donde eliminarlos cambiaría el programa: después de return / throw / break / continue / yield / async, y entre dos instrucciones donde JavaScript insertaría un punto y coma automáticamente (a\nb, x={}\nfoo()). La mayor parte del resto del código queda en una sola línea.
  • JavaScript se tokeniza, no se analiza: un "/*" dentro de una cadena, una expresión regular o una plantilla de cadena nunca se toca. La división y las expresiones regulares se distinguen por el token anterior; una regex que abarca una línea se trata como división.
  • CSS solo pierde el espacio que no puede significar nada: alrededor de { } ; , > ~ ! y después de «:», y el último «;» antes de un «}». Los espacios de descendencia se mantienen (.a .b no es .a.b), el espacio antes de «:» se mantiene (a :hover no es a:hover) y calc(100% - 10px) conserva sus espacios porque forman parte de la sintaxis.
  • Sin renombrado (mangle), sin eliminación de código muerto y sin drop_console: eso cambia el comportamiento, y un botón de «minificar» no debería hacerlo en silencio.
  • No compatible: HTML/SVG (allí el espacio depende de <pre>, <textarea> y los elementos en línea), reescrituras de tipos de TypeScript, entrada JSX/TSX, mapas de código fuente y fusión de varios archivos. JSX se detecta y se avisa.
  • Una cadena, plantilla, comentario o url( sin cerrar al final de la entrada es un aviso, no un error: el resto del código se sigue minificando. Los paréntesis o llaves desequilibrados también son un aviso: esto no es un validador.
  • Las lecturas cuentan puntos de código Unicode, no bytes ni unidades UTF-16; los porcentajes se redondean a un número entero y se muestran como +n % cuando la salida crece. Todo funciona en tu navegador: no se sube, guarda ni añade nada a la URL.
  • Por encima de 200.000 caracteres el resultado se actualiza unos 0,6 s después de que dejes de escribir; el texto nunca se trunca. La salida usa LF y no termina en salto de línea.

Lo que suele hacer falta después, una vez pequeño el código.

Formateador de código (embellecedor)

Caja de herramientas JSON

Formateador XML