Archivos más pequeños para producción, código legible para depurar
Este minificador reduce CSS, JavaScript y HTML para producción y te muestra exactamente cuánto ahorras: el tamaño original, el tamaño minificado y el tamaño tras gzip, que es lo que de verdad descargan tus visitantes. JavaScript se minifica con terser, el minificador que usan la mayoría de las herramientas de build modernas, y CSS con csso, que además fusiona reglas duplicadas. Cambia a Embellecer para convertir un bundle o una hoja de estilos minificada de nuevo en código indentado y legible. Tu código se procesa en tu navegador y nunca se sube.
Cómo minificar o embellecer código
- 1Elige el lenguaje: CSS, JavaScript o HTML. Si sueltas un archivo
.css,.jso.htmlen la entrada, se elige automáticamente. - 2Elige Minificar para reducir el código o Embellecer para formatearlo.
- 3Ajusta las opciones: en JavaScript, si se acortan los nombres y se comprime; en CSS, si se reestructuran las reglas; en HTML, si se minifican los estilos y scripts en línea. Los comentarios de licencia se conservan salvo que lo desactives.
- 4Mira los tamaños bajo el resultado para ver el ahorro antes y después de gzip.
- 5Copia la salida o descárgala como
.min.js,.min.csso.html.
Qué hace la minificación
La minificación elimina todo lo que el navegador no necesita para ejecutar el código: comentarios, indentación, saltos de línea y puntos y coma opcionales. Los buenos minificadores van más allá. terser renombra las variables locales a una sola letra (mangling), elimina código inalcanzable, precalcula expresiones constantes y convierte sentencias if en ternarios. csso acorta colores (#ff0000 pasa a red), quita unidades en los ceros y fusiona reglas con declaraciones o selectores idénticos.
El resultado se comporta exactamente igual que el original, pero suele ser un 30–70 % más pequeño en JavaScript y un 15–40 % en CSS antes de comprimir.
Por qué importa el tamaño gzip
Los servidores web y las CDN comprimen los archivos de texto con gzip o Brotli antes de enviarlos, así que la cifra que afecta al tiempo de carga es el tamaño comprimido, no el bruto. La compresión ya elimina gran parte de la repetición que ataca la minificación, por eso un ahorro del 60 % al minificar puede quedarse en un 20 % tras gzip. Aun así merece la pena en cada visita, y el mangling en particular sigue aportando después de comprimir.
La cifra de gzip usa el nivel 6, el predeterminado de nginx y de la mayoría de servidores. Brotli suele quedar otro 10–20 % más pequeño.
Las opciones, explicadas
- Acortar nombres
- Renombra variables locales y parámetros de funciones con nombres cortos. Los nombres globales y las propiedades de objetos nunca se renombran, así que el código que llaman otros scripts sigue funcionando.
- Comprimir
- En JavaScript, las pasadas de optimización de terser: eliminación de código muerto, plegado de constantes, inlining. En CSS, la reestructuración de csso, que fusiona y reordena reglas cuando es seguro.
- Conservar comentarios de licencia
- Conserva los comentarios que empiezan por /*! o contienen @license o @preserve, que muchas licencias de código abierto exigen mantener.
- CSS y JS en línea
- En HTML, minifica el contenido de los elementos <style> y <script> y de los atributos style. Los bloques JSON-LD también se compactan; los scripts de otros tipos no se tocan.
- Quitar comillas de atributos
- Escribe class=nav en lugar de class="nav" cuando HTML lo permite. Es HTML válido, pero a algunas herramientas XML y sistemas de plantillas no les gusta, así que viene desactivado.
Cómo se minifica el HTML
La minificación de HTML es deliberadamente conservadora. Se eliminan los comentarios, salvo los comentarios condicionales de Internet Explorer. Las secuencias de espacios se reducen a un solo espacio, y se elimina el espacio junto a elementos de bloque como <div> y <p>, donde nunca se muestra. Entre elementos en línea siempre se deja un espacio, porque quitarlo uniría <b>big</b> <i>world</i> en una sola palabra. El contenido de <pre> y <textarea> nunca se modifica.
Si un script en línea tiene un error de sintaxis, se deja exactamente como estaba y se te indica en qué línea está, en vez de que falle toda la página.
Embellecer código minificado
Embellecer usa js-beautify para reindentar el código: una sentencia por línea en JavaScript, una declaración por línea en CSS e indentación anidada en HTML. Es la forma más rápida de leer un script de terceros minificado o de entender una hoja de estilos copiada del navegador. No puede recuperar los nombres de variables ni los comentarios originales que quitó el minificador, pero la estructura se vuelve fácil de seguir.
Para otros formatos, consulta el formateador JSON y el formateador SQL.
Preguntas frecuentes
- ¿Se sube mi código a algún sitio?
- No. terser, csso y js-beautify se ejecutan en tu navegador, así que tu código se queda en tu dispositivo.
- ¿El JavaScript minificado seguirá funcionando?
- Sí. terser solo hace cambios que conservan el comportamiento. El código que depende de nombres de funciones o clases en tiempo de ejecución, como algunos frameworks de inyección de dependencias, puede necesitar que desactives el acortado de nombres.
- ¿Admite JavaScript moderno y módulos ES?
- Sí. terser entiende la sintaxis moderna, incluidas clases, async/await, optional chaining y top-level await. Los archivos con sentencias import o export se minifican como módulos ES.
- ¿Puede minificar TypeScript o JSX?
- No. Compila primero TypeScript o JSX a JavaScript y luego minifica el resultado. Si el código no es JavaScript puro, se muestra un error de sintaxis con línea y columna.
- ¿Qué diferencia hay entre minificar y gzip?
- Minificar reescribe el propio código para que sea más corto. Gzip es una compresión que el servidor aplica a cualquier archivo al enviarlo. Funcionan juntos: primero minifica y luego deja que el servidor comprima.
- ¿Puedo desminificar JavaScript o CSS?
- Sí. Elige Embellecer para reindentar el código minificado. Los nombres de variables y comentarios originales no se pueden recuperar, pero la estructura se vuelve legible.
- ¿Por qué se fusionan o reordenan las reglas de mi CSS?
- Es la reestructuración de csso, que fusiona reglas con las mismas declaraciones o selectores. Es segura en hojas de estilo normales; desactiva Comprimir si dependes de un orden exacto de reglas entre selectores con la misma especificidad.