Sin subida, 100% local, sin cuenta

Minificar / Embellecer

Minifica o embellece código. Todo permanece en tu navegador.

Cómo funciona Minificar / Embellecer

Minificar/Embellecer comprime HTML, CSS y JavaScript eliminando comentarios, espacios en blanco innecesarios y caracteres redundantes, o expande el código minificado de vuelta a una forma sangrada legible. Todo el procesamiento ocurre en el navegador usando analizadores incluidos; nada de lo que pegues se transmite a ningún lugar. Nada de lo que escribas aquí sale de tu dispositivo.

La minificación afecta directamente al rendimiento de carga de la página: los archivos más pequeños se transfieren más rápido, se analizan más rápido y consumen menos ancho de banda. Para las implementaciones de producción, los recursos minificados son estándar. Esta herramienta es útil cuando recibes un archivo minificado que necesitas leer (embellecer), cuando quieres comprobar qué hace un minificador a un fragmento antes de integrarlo en un pipeline de compilación, o cuando necesitas una minificación puntual sin configurar una herramienta de compilación.

Escrito por Bastien Sulyan

Cómo usar Minificar / Embellecer, paso a paso

  1. Pega tu código HTML, CSS o JavaScript en el área de entrada.
  2. Selecciona el tipo de lenguaje en el menú desplegable (HTML, CSS o JavaScript).
  3. Haz clic en «Minificar» para producir la versión comprimida, o «Embellecer» para expandir y sangrar el código.
  4. Copia el resultado del área de salida usando el botón de copiar.
  5. Pega código diferente y repite según sea necesario.

Casos de uso comunes

  • Un desarrollador frontend quiere minificar un fragmento CSS crítico para incluirlo en el head HTML para el rendimiento sobre el pliegue.
  • Un desarrollador recibe un script de terceros minificado y necesita embellecerlo para entender su lógica durante una revisión de seguridad.
  • Un escritor técnico necesita una versión formateada de una etiqueta de script JSON-LD minificada para incluirla en la documentación.
  • Un desarrollador web comprueba el ahorro de bytes de la minificación de un archivo CSS antes de decidir si añadir un paso de compilación.

Preguntas frecuentes

¿El código que pego se envía a algún servidor para su minificación?

No. La minificación y el embellecimiento los realiza el propio código de la página, escrito específicamente para esta herramienta en lugar de tomarlo de un minificador de terceros. Todo el procesamiento permanece en la pestaña del navegador. Nada de lo que pegas aquí se transmite a Sunasty ni a ningún tercero.

¿La minificación de JavaScript preserva el comportamiento original del código?

Un buen minificador preserva el comportamiento eliminando solo el espacio en blanco, acortando los nombres de las variables dentro de un ámbito controlado y eliminando los comentarios. Esta herramienta apunta a transformaciones seguras. Las optimizaciones agresivas como la eliminación de código muerto o la inserción de funciones generalmente no se aplican, ya que requieren un análisis completo del programa.

¿Puedo minificar y luego embellecer el resultado para verificarlo?

Sí. Minifica el código primero, luego pega la salida minificada de vuelta en la entrada y haz clic en Embellecer. La versión embellecida se verá diferente del código fuente original (los nombres de variables pueden acortarse, los comentarios eliminados) pero será estructuralmente equivalente.

¿La minificación de HTML elimina todos los comentarios?

La herramienta elimina los comentarios HTML estándar (<!-- ... -->) durante la minificación. Los comentarios condicionales usados por versiones antiguas de IE (<!--[if IE]...-->) siempre se conservan, por lo que eliminar comentarios no puede romper comportamientos heredados que dependan de ellos.

¿Hay un límite de tamaño en el código que puedo minificar?

El límite es la memoria disponible de la pestaña del navegador. El código de hasta unos pocos cientos de kilobytes se procesa rápidamente. Para paquetes JavaScript grandes (megabytes), una herramienta de compilación dedicada como esbuild, Terser o Lightning CSS es más rápida y apropiada para uso en producción.