Minificador de código

¿Qué es el minificador de código?

El minificador de código elimina espacios, saltos de línea y comentarios de HTML, CSS, JavaScript, JSON y XML para que el archivo que publicas sea más pequeño y se descargue más rápido. Pega código, elige el lenguaje (o Mixto para una página HTML con estilos y scripts en línea), haz clic en Minificar y lee el tamaño antes y después. También funciona al revés: Embellecer vuelve a sangrar código minificado o generado por máquina para que puedas leerlo y editarlo. Todo se ejecuta en tu navegador; tu código fuente no se envía a ningún sitio.

Cómo se usa

1. Elige el lenguaje en el menú desplegable. Usa Mixto para un documento HTML completo con bloques <style> y <script>.
2. Pega tu código en el editor.
3. Haz clic en Minificar. Debajo aparece el resultado con el tamaño original, el tamaño minificado y el porcentaje ahorrado.
4. Haz clic en el botón para copiar la salida y llevarte el resultado. Conserva tu original en el control de versiones y publica solo la copia minificada.
5. ¿Necesitas leerlo de nuevo más tarde? Pega la versión minificada y haz clic en Embellecer.

Funciones

• Cinco lenguajes más Mixto. HTML, CSS, JavaScript, JSON y XML, cada uno con reglas que respetan lo que no debe tocarse (contenido de cadenas, bloques pre, expresiones regulares).
• En ambos sentidos. Minificar para producción, Embellecer para depurar.
• Contador de bytes. Tamaños exactos de entrada y salida para saber si el cambio mereció la pena.
• Funciona en tu navegador. Tu código no se sube. La página carga sus bibliotecas de minificación desde una red de distribución de contenido, así que necesitas conexión para abrirla.
• Sin límite fijo. Los archivos grandes funcionan siempre que tu navegador tenga memoria para ellos.

Qué ahorra la minificación y qué no

Eliminar espacios y comentarios suele reducir el CSS entre un 15 y un 30 por ciento y el JavaScript escrito a mano entre un 20 y un 40 por ciento antes de gzip. Tras gzip o Brotli, que aplica todo buen alojamiento, la diferencia se reduce a unos pocos puntos, porque la compresión ya maneja bien los espacios repetidos. Minificar sigue valiendo la pena porque el navegador tiene que analizar cada byte que recibe, pero las mayores mejoras suelen venir de eliminar CSS sin usar, dividir paquetes grandes de JavaScript y diferir los scripts que no hacen falta para el primer renderizado. Para las cifras honestas y cuándo la minificación puede romper un sitio, lee minificar CSS y JavaScript: qué ahorra, cuándo rompe cosas y cómo hacerlo con seguridad.

Cosas que pueden romperse

• JavaScript que depende de la inserción automática de punto y coma. Si un script falla tras minificar, añade los puntos y coma que faltan e inténtalo de nuevo.
• HTML donde los espacios son significativos, como los diseños inline-block que dependen del espacio entre etiquetas, o el contenido de <pre> y <textarea>.
• Comentarios condicionales y marcadores de plantilla que parecen comentarios normales. Revisa la salida si tu código los usa.
• El JSON con comentarios no es JSON válido; el minificador los elimina, que suele ser lo que quieres.

Herramientas relacionadas

Ordena el código antes de confirmarlo con el formateador de HTML, CSS y JavaScript, valida respuestas de API con el formateador y validador de JSON y revisa las cabeceras de compresión que envía tu servidor con el comprobador de cabeceras HTTP.

Preguntas frecuentes

¿Minificar cambia el comportamiento del código?

No debería. Los espacios y comentarios no afectan a la ejecución en CSS, JSON o XML, y en JavaScript solo en el caso límite del punto y coma citado arriba. Los nombres de variables no se acortan, así que las trazas de pila siguen siendo legibles.

¿Es lo mismo que hacen Webpack o Vite?

Los empaquetadores van más allá: renombran variables, eliminan código muerto y hacen tree-shaking de las importaciones. Esta herramienta sirve para minificar rápido de forma puntual, para sitios sin paso de compilación y para comprobar cuánto se reducirá un archivo.

¿Se guarda mi código?

No. El procesamiento se hace en tu navegador y no se transmite nada.

¿Puedo minificar una página HTML entera con CSS y JS en línea?

Sí, elige Mixto y cada bloque se trata con sus propias reglas.