Minificador de CSS y JavaScript
Quita espacios, saltos y comentarios de tu CSS o tu JavaScript, y te dice cuánto peso ahorraste.
Tu código no sale de tu navegador. Puedes pegar código privado sin que llegue a ningún servidor.
Qué quita y qué no toca
Quita lo que el navegador no necesita para entender el código: comentarios, saltos de línea, tabulaciones y espacios sobrantes. En CSS, además, el espacio pegado a llaves, dos puntos y comas, y el último punto y coma antes de cerrar un bloque.
No renombra variables ni reescribe la lógica. El resultado hace exactamente lo mismo que el original y sigue siendo legible si lo vuelves a formatear. Eso lo distingue de ofuscar, que busca justo lo contrario.
Por qué no usa expresiones regulares
La forma corta de escribir un minificador es una tanda de expresiones regulares sobre todo el texto. Funciona bien hasta que aparece esto:
var patron = /\/\*.*?\*\//g; // una regex que contiene «/*»
var aviso = "no borres /* esto */";Un minificador de expresiones regulares ve ese /* dentro de la cadena, cree que empieza un comentario y se come el resto del archivo hasta encontrar un */. Sin error, sin aviso: simplemente el archivo resultante está roto.
Este recorre el código carácter a carácter con un pequeño autómata que sabe en todo momento si está dentro de una cadena, de un comentario o de una expresión regular, y solo toca lo que está fuera de todo eso.
Aun así, prueba el resultado
No es un analizador sintáctico completo, y hay un caso que ninguna heurística resuelve del todo: distinguir una división de una expresión regular cuando ambas son gramaticalmente posibles. En código real prácticamente no ocurre, pero conviene decirlo en vez de prometer que no puede fallar.
Guarda siempre el original y prueba el resultado antes de publicarlo.
Cuánto se ahorra
| Tipo de código | Ahorro típico |
|---|---|
| CSS escrito a mano, con comentarios | 25 a 40 % |
| JavaScript escrito a mano | 20 a 35 % |
| Código ya minificado | Casi nada |
Los bytes se cuentan en UTF-8, que es lo que viaja de verdad por la red: un acento ocupa dos bytes aunque sea un solo carácter.
Para un proyecto entero, usa otra cosa
Esta herramienta está pensada para un archivo suelto: un fragmento que te pasaron, un CSS que vas a pegar en una plantilla. Para un proyecto completo conviene un minificador integrado en el proceso de compilación —Terser para JavaScript, cssnano o clean-css para CSS— que además renombra variables, elimina código muerto y se ejecuta solo en cada despliegue.
Este mismo sitio usa Terser y clean-css en su propio build, por ejemplo. Y recuerda que la compresión del servidor —gzip o brotli— suele ahorrar más que la minificación: se acumulan, no se sustituyen.