Minificador de JavaScript y CSS

Qué hace

La minificación elimina todo lo que un navegador no necesita para ejecutar tu código: espacios en blanco, saltos de línea, comentarios y nombres largos. Los archivos más pequeños se descargan más rápido, lo que mejora el tiempo de carga de la página y las Core Web Vitals, sobre todo en redes móviles.

Esta herramienta minifica JavaScript con Terser, el minificador que usan webpack, Rollup y Vite, y CSS con CSSO, que además reestructura las hojas de estilo: acorta los colores (#ffffff a #fff), elimina unidades y valores redundantes (0px 0px a 0) y fusiona reglas que comparten selectores o declaraciones.

Cómo se usa

1. Pega el código en el cuadro de Entrada, suelta encima un archivo .js o .css, o haz clic en Ejemplo.
2. Elige JavaScript o CSS.
3. En JavaScript, Acortar nombres de variables renombra las variables locales y los parámetros con letras sueltas. Los nombres exportados y globales nunca se cambian.
4. En CSS, Fusionar reglas duplicadas combina las reglas con las mismas declaraciones.
5. Copia el resultado o descárgalo. Los contadores de tamaño bajo cada cuadro muestran cuánto has ahorrado.

Si el JavaScript tiene un error de sintaxis, el mensaje de error muestra la línea y la columna para que puedas saltar a ella.

Ejemplo

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

se convierte en

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

Cuándo usarlo

Úsalo para algo puntual: un fragmento para un CDN, un script en línea en un correo HTML, un bookmarklet o para ver cuánto podría reducirse una librería. En un proyecto real, tu bundler debería minificar en cada build para que el código fuente siga siendo legible.