Minificador de código

Cómo usar Minificador de código

1. Pega tu CSS, JavaScript o HTML.
2. Elige el lenguaje y minifica.
3. Copia el resultado para producción.

Qué se elimina y qué se conserva

La minificación es una transformación segura: el código sigue haciendo exactamente lo mismo.

Se eliminan los espacios y saltos de línea innecesarios, los comentarios, y el punto y coma final de cada bloque cuando es prescindible.

En JavaScript se acortan además los nombres de variables locales, lo que reduce bastante más el tamaño.

Lo que no cambia nunca es el comportamiento: si el código minificado se comporta distinto, es que había algo frágil en el original — normalmente una dependencia de saltos de línea o una inserción automática de punto y coma que se rompe.

Ojo con una cosa: en HTML no todos los espacios son eliminables. Dentro de un elemento pre, o entre elementos en línea, el espacio es significativo y quitarlo cambia lo que se ve.

Y en CSS, los comentarios que empiezan con una marca especial suelen conservarse, porque ahí es donde van las licencias que legalmente hay que mantener.

Minificar no es comprimir

Aquí hay una confusión frecuente que conviene deshacer.

La minificación reduce el código fuente. La compresión — gzip o brotli — reduce lo que viaja por la red, y la hace el servidor al enviar el archivo.

Son cosas distintas y complementarias: se usan las dos a la vez.

El detalle interesante es que la compresión ya elimina buena parte de la redundancia de los espacios, así que la ganancia adicional de minificar es menor de lo que sugiere el porcentaje bruto.

Aun así compensa, sobre todo en JavaScript, donde el acortamiento de nombres sí aporta una reducción que la compresión no consigue por sí sola.

Comprueba que tu servidor tiene la compresión activada: es la optimización con mejor relación esfuerzo-resultado que existe, y sigue habiendo sitios que la tienen desactivada sin saberlo.

Y si sirves los archivos a través de una red de distribución de contenidos, suele hacerlo por ti, pero conviene verificarlo en vez de suponerlo.

Cómo integrarlo bien

Minificar a mano y pegar el resultado es un mal flujo de trabajo.

La minificación debe formar parte de tu proceso de compilación, no ser un paso manual. Si minificas a mano acabarás editando el archivo minificado antes o después, y eso es una fuente segura de problemas.

Guarda siempre el código original en el repositorio y genera el minificado en el despliegue.

Publica mapas de origen para poder depurar en producción. Sin ellos, un error en un archivo minificado te dice que algo falló en la línea 1, columna 8420, lo cual no ayuda.

Ten cuidado con los mapas de origen en producción: exponen tu código fuente. Muchos equipos los generan pero los sirven solo a su herramienta de seguimiento de errores, no públicamente.

Y no te obsesiones. Antes de minificar, mira si estás cargando una biblioteca completa para usar dos funciones, o fuentes que nadie ve, o imágenes sin optimizar. Ahí suele estar el peso de verdad.

Todo el proceso ocurre en tu navegador: el código no se envía a ningún servidor, lo que importa si trabajas con código de cliente bajo acuerdo de confidencialidad.

Preguntas frecuentes