Minificador y Embellecedor CSS/JS

El embellecimiento es lo contrario: toma un código compacto o minificado y le da formato con una indentación consistente, nuevas líneas entre declaraciones y el espaciado adecuado. Lo necesitas cuando depuras librerías minificadas de terceros (copia el código minificado, embellecélo y luego léelo), cuando trabajas con CSS/JS generados o concatenados que no tienen formato, cuando revisas código antiguo que nunca fue formateado correctamente o cuando una revisión de código requiere diffs legibles. No añade comentarios ni restaura los nombres originales de las variables — solo se reconstruye el formato.

El minificador de esta herramienta es conservador: solo elimina espacios en blanco y comentarios, que nunca tienen un significado semántico. Los literales de cadena (entre comillas simples, dobles y template literals en JS), las expresiones regulares, los selectores CSS y los valores de propiedad se preservan exactamente. Un error común: si tu JavaScript depende de la inserción automática de puntos y coma (ASI) y el código está estructurado de forma ambigua, la minificación que pone múltiples sentencias en una sola línea podría, teóricamente, causar problemas. El enfoque más seguro es usar siempre puntos y coma explícitos y probar la salida minificada en tus navegadores de destino.

Para proyectos de producción con un flujo de trabajo de desarrollo: usa una herramienta de construcción (Webpack, Vite, Rollup, esbuild o Parcel) que integre la minificación en tu pipeline de construcción. Estas herramientas ofrecen optimizaciones más avanzadas: tree-shaking, bundling de módulos, splitting de código, source maps y post-procesamiento. Esta herramienta en línea es mejor para: minificación única de archivos antiguos sin un sistema de construcción, verificar rápidamente el tamaño minificado antes de comprometerse con un cambio en el pipeline de construcción, leer el código minificado de otra persona embelleciéndolo o proyectos pequeños donde configurar un sistema de construcción sería excesivo.

Sube archivos .css o .js de hasta 5MB por archivo. La herramienta detecta automáticamente el modo basado en la extensión del archivo. Para la entrada de texto (modo de pegado), no hay límite de tamaño pero los archivos muy grandes pueden tardar un momento en procesarse. El resultado se puede descargar como un archivo .css o .js. SCSS, TypeScript y otros formatos preprocesados deben compilarse a CSS o JavaScript simple antes de la minificación.

La minificación reduce el tamaño del archivo eliminando caracteres redundantes. La compresión Gzip (aplicada por los servidores web para la transferencia) luego comprime aún más el archivo minificado. La idea clave: el código minificado se comprime mejor que el código original porque tiene menos variedad de caracteres. La combinación de minificación + Gzip suele lograr una reducción total del 60-85%. Al servir un archivo CSS de 100KB: original + Gzip ≈ 25KB, minificado + Gzip ≈ 15KB. La minificación ahorra 10KB después del Gzip. Sin el Gzip configurado en tu servidor, la minificación ahorra más en términos absolutos pero la ganancia relativa es menor.

No. Toda la minificación y embellecimiento ocurren en tu navegador usando JavaScript. Tu código CSS y JavaScript, que puede contener lógica propietaria, endpoints de API o configuraciones sensibles, nunca sale de tu dispositivo.

No directamente — la herramienta procesa CSS y JavaScript por separado porque tienen diferentes reglas de sintaxis. Si tienes archivos HTML con bloques <style> y <script> incrustados, tendrías que extraer cada sección, minificarlas por separado y luego volver a insertarlas. Para una minificación completa de HTML+CSS+JS en una sola pasada, usa un minificador de HTML que maneje bloques de código incrustados o usa una herramienta de construcción que procese todos los tipos de activos juntos.