Minificador de CSS / JS
La minificación reduce el tamaño de los archivos CSS y JavaScript eliminando comentarios y espacios innecesarios, sin alterar el comportamiento del código. Esta herramienta ligera procesa tu código directamente en el navegador — nada se envía a un servidor — y muestra el tamaño original, el tamaño minificado y el porcentaje ahorrado para que evalúes el impacto de un vistazo.
Aunque los proyectos en producción suelen usar minificadores integrados en herramientas de build (como esbuild, Terser o Lightning CSS) que realizan optimizaciones avanzadas como renombrado de variables y eliminación de código muerto, esta calculadora es ideal para comprobaciones rápidas, ejercicios de aprendizaje o fragmentos puntuales donde configurar un pipeline completo sería excesivo.
Como funciona
Minificación ligera: (1) eliminar comentarios de bloque /* … */ y comentarios de línea //; (2) colapsar secuencias de espacios en blanco (espacios, tabulaciones, saltos de línea) a un único espacio; (3) eliminar espacios alrededor de delimitadores como : ; { } , > ~ + en CSS y = + - * / ; : { } ( ) [ ] , en JS. Ahorro % = (bytesOriginales − bytesMinificados) / bytesOriginales × 100.
Casos de uso
- Reducir rápidamente un fragmento de CSS antes de pegarlo en un CMS o plantilla de email
- Comprobar cuánto espacio en blanco y comentarios inflan una función utilitaria JS
- Aprender cómo funciona la minificación paso a paso sin una herramienta de build
- Preparar pequeños scripts o estilos inline para clientes de correo HTML
- Estimar el ahorro de ancho de banda antes de configurar un pipeline de build completo
Preguntas frecuentes
¿Qué hace un minificador de CSS o JavaScript?
Un minificador reduce el tamaño del archivo eliminando todo lo que el navegador no necesita para ejecutar el código: comentarios de bloque y de línea, espacios extra, tabulaciones y saltos de línea. También quita los espacios alrededor de delimitadores como llaves, dos puntos y punto y coma. El comportamiento del código se mantiene exactamente igual — solo cambia el formato.
¿Minificar CSS o JS cambia el funcionamiento del código?
No. La minificación ligera solo elimina comentarios y colapsa espacios en blanco, por lo que la lógica y el resultado siguen siendo idénticos. Aun así, casos especiales como comentarios dentro de cadenas pueden confundir a los minificadores simples, así que conviene probar el resultado antes de publicarlo.
¿Cuánto se reduce mi archivo al minificarlo?
Depende por completo de cuánto del archivo son comentarios y espacios. El código bien comentado e indentado se reduce más, mientras que el código ya compacto cambia poco. Esta herramienta muestra el tamaño original, el tamaño minificado y el porcentaje ahorrado para medir el impacto exacto en tu fragmento.
¿Mi código se envía a algún servidor al usar el minificador?
No. Todo se ejecuta en tu navegador mediante JavaScript, y el código nunca sale de tu dispositivo. Eso hace que la herramienta sea segura incluso con fragmentos propietarios o sensibles.
¿Debo usar esta herramienta en lugar de Terser o esbuild en producción?
Para builds de producción, los minificadores dedicados como Terser, esbuild o Lightning CSS son la mejor opción, ya que además renombran variables, eliminan código muerto y aplican otras optimizaciones avanzadas. Esta herramienta está pensada para comprobaciones rápidas, aprendizaje y fragmentos puntuales donde montar un pipeline de build sería excesivo.