Minificador de Código

Minifica código JavaScript, CSS, HTML y JSON

Leer la guía completa

Lenguaje:

Código de Entrada0 bytes

Salida Minificada

Sobre la Minificación de Código:

JavaScript: Usa Terser - elimina código muerto, ofusca variables
CSS: Usa CSSO - reestructura selectores, elimina duplicados
HTML: Elimina comentarios, colapsa espacios en blanco
JSON: Elimina todo el formato preservando los datos

Todo el procesamiento ocurre en tu navegador. Las bibliotecas se cargan bajo demanda.

Minifica código JavaScript, CSS, HTML y JSON para producción. Reduce tamaño de archivos eliminando espacios, comentarios, y optimizando sintaxis. JavaScript usa Terser (el minificador de webpack) con eliminación de código muerto y ofuscación de variables. CSS usa CSSO para reestructuración de selectores y eliminación de propiedades duplicadas. HTML colapsa espacios y remueve comentarios. JSON elimina todo el formato. Ideal para optimizar tiempos de carga en sitios web de e-commerce en LATAM, apps móviles híbridas, y cualquier proyecto donde el rendimiento importa.

La minificación reduce el tamaño de archivos de código eliminando caracteres innecesarios sin cambiar la funcionalidad. Técnicas: (1) Eliminar espacios, tabulaciones, y saltos de línea. (2) Remover comentarios. (3) Acortar nombres de variables (JavaScript): 'userClickHandler' → 'a'. (4) Eliminar código muerto (funciones nunca llamadas). (5) Optimizar expresiones: 'true' → '!0'. (6) Combinar declaraciones. Impacto típico: JavaScript 50-70% reducción, CSS 30-50%, HTML 10-20%, JSON 20-30%. En Latinoamérica, donde muchos usuarios tienen conexiones móviles lentas, la minificación mejora significativamente la experiencia de usuario y los Core Web Vitals de Google.

Deploy a Producción

Antes de subir código a producción, minifica todos los assets. Webpack, Vite, y Rollup incluyen minificación, pero para archivos sueltos usa esta herramienta.

Optimizar Tiempos de Carga

Sitios de e-commerce en LATAM (Mercado Libre, Amazon México, Linio) necesitan carga rápida. Cada KB ahorrado mejora conversión y SEO.

Reducir Costos de CDN

Menos bytes = menos costo de transferencia. Para sitios con alto tráfico, la minificación reduce significativamente costos de hosting y CDN.

Librerías y Plugins

Si distribuyes código JavaScript (npm packages, plugins WordPress), provee versiones .min.js minificadas para que usuarios optimicen sin esfuerzo.

Inline Scripts

Para scripts críticos inline en HTML (above-the-fold), minifica para reducir el tamaño del HTML y mejorar First Contentful Paint.

Cada lenguaje usa un minificador especializado cargado bajo demanda: (1) JavaScript: Terser—parser completo que entiende ES2023, tree-shaking, mangling de nombres, compresión de sintaxis. (2) CSS: CSSO—parser CSS que reestructura selectores, elimina duplicados, minifica valores (white → #fff). (3) HTML: htmlminifier-terser—colapsa whitespace, elimina comentarios, minifica inline CSS/JS. (4) JSON: JSON.parse + stringify sin espacios. Las librerías se cargan desde CDN solo cuando las necesitas (lazy loading). El procesamiento es 100% en navegador—tu código nunca se sube a ningún servidor.

Lenguaje	Librería	Reducción Típica	Técnicas
JavaScript	Terser	50-70%	Mangling, dead code, compress
CSS	CSSO	30-50%	Restructure, merge, minify values
HTML	htmlminifier	10-20%	Whitespace, comments, inline
JSON	Native	20-30%	Remove formatting

Las librerías de minificación se cargan desde CDN (UNPKG/jsDelivr). Requiere conexión para la primera carga, luego se cachean. Soporta ES2023 para JavaScript, CSS3 para estilos. Para proyectos grandes, considera herramientas de build (webpack, Vite) que minifican automáticamente. Esta herramienta es ideal para archivos individuales o quick minification.

Preguntas frecuentes

¿La minificación rompe mi código?

No debería si el código es válido. Errores comunes: (1) Variables globales que dependes de nombre específico. (2) eval() o Function() que referencia variables por string. (3) Reflection que usa nombres de funciones. Si tienes problemas, revisa la consola de errores.

¿Debo minificar en desarrollo?

No. Desarrolla con código legible y source maps. Minifica solo para producción. Los bundlers modernos (webpack, Vite) manejan esto automáticamente según el ambiente.

¿Cuál es la diferencia entre minificar y comprimir (gzip)?

Minificar reduce código fuente eliminando caracteres innecesarios. Gzip/Brotli comprime bytes para transferencia. Usa ambos: minifica primero, luego el servidor comprime. Son complementarios.

¿Por qué mi CSS minificado es más grande?

Posibles causas: (1) CSS muy pequeño donde overhead de procesamiento excede ahorro. (2) CSS ya estaba minificado. (3) Estilos con prefijos vendor que no se pueden optimizar. Esto es raro—normalmente hay reducción.