JavaScript Minifier
Minify and compress JavaScript code
Esta es una minificación básica. Para producción, usa herramientas como Terser, UglifyJS o el minificador de tu bundler.
Minificador JavaScript
Reduce el tamaño de tu JavaScript eliminando comentarios, espacios y saltos de línea innecesarios.
Minificador JavaScript Online - Comprimir y Optimizar Código JS
¿Cómo funciona la minificación JavaScript?
La minificación JS va más allá de eliminar espacios. Incluye: eliminación de comentarios y whitespace; acortamiento de nombres de variables locales (userName → a); eliminación de código muerto (dead code elimination); simplificación de expresiones constantes; eliminación de console.log en producción; colapso de declaraciones de variables; conversión de propiedades a notación de punto cuando es posible. El código resultante es funcionalmente idéntico pero ilegible para humanos, lo cual también proporciona una capa básica de ofuscación. Minificadores avanzados como Terser pueden reducir código 60-70%.
Diferencia entre minificación, uglificación y tree shaking
Minificación reduce el tamaño eliminando caracteres innecesarios y acortando nombres. Uglificación (término de UglifyJS) incluye minificación más transformaciones que hacen el código más difícil de entender (ofuscación básica). Tree shaking (sacudir el árbol) es una optimización de bundlers modernos que elimina código no utilizado: si importas solo una función de una librería, tree shaking elimina el resto. Estas técnicas son complementarias. Un pipeline de build moderno (Webpack, Vite, Rollup) aplica tree shaking durante el bundling y minificación al final.
Consideraciones de seguridad y source maps
La minificación NO es seguridad. Aunque el código es difícil de leer, cualquier desarrollador determinado puede "beautificarlo" y entenderlo. Nunca incluyas secretos (API keys, contraseñas) en JavaScript del cliente, minificado o no. Para depuración en producción, usa source maps: archivos .map que vinculan código minificado con el original. Los DevTools pueden mostrar el código fuente si el source map está disponible. En producción, puedes servir source maps solo a usuarios autenticados o no servirlos públicamente.
Preguntas frecuentes
¿La minificación puede introducir bugs?
Muy raramente con minificadores modernos como Terser. Problemas pueden surgir si el código depende de nombres de funciones (reflection), tiene bugs de sintaxis que el navegador tolera, o usa eval() con código generado dinámicamente. Siempre prueba el código minificado antes de desplegar. Los source maps facilitan identificar si un bug existe en el original o fue introducido.
¿Por qué mi código minificado sigue siendo grande?
Posibles razones: el código original tiene mucha lógica que no puede reducirse; estás incluyendo librerías completas cuando solo usas parte de ellas; no estás usando tree shaking; tienes mucho código duplicado. Considera usar bundlers con tree shaking, importar solo lo necesario de librerías (import {map} from lodash-es vs import _ from lodash), y eliminar dependencias innecesarias.
¿Debo minificar código que ya usa un bundler?
Si tu bundler (Webpack, Vite, Rollup) está configurado para producción, ya minifica automáticamente. No necesitas minificación adicional. Esta herramienta es útil para scripts independientes sin pipeline de build, código legacy, o verificar cómo queda el código minificado antes de configurar el bundler.
¿El minificador soporta ES6+ y TypeScript?
Esta herramienta soporta JavaScript moderno incluyendo ES6+ (arrow functions, destructuring, template literals, classes, async/await). Para TypeScript, primero debes compilar a JavaScript con tsc, luego minificar el resultado. Los bundlers modernos manejan TypeScript y minificación en un solo paso.