Minificador de JavaScript
Pega o suelta tu JavaScript y obtén un archivo más pequeño con un clic. Terser comprime las expresiones y acorta los nombres de variables; si Terser no se puede cargar, un minificador integrado elimina comentarios y espacios en blanco de forma segura. Tu código nunca sale del navegador.
Última actualización:
Cómo usar Minificador de JavaScript
- Pega tu JavaScript en el cuadro de la izquierda, suelta un archivo .js en él o pulsa Abrir archivo .js.
- Elige las opciones: Comprimir y Mangle dan la salida más pequeña; marca Mangle de nombres de nivel superior solo para scripts autónomos.
- Pulsa Minificar JavaScript. La salida se actualiza automáticamente mientras escribes o cambias las opciones.
- Revisa el resultado: la etiqueta del motor muestra si se ejecutó Terser o el minificador integrado, y las tarjetas muestran los bytes ahorrados y el tamaño gzip.
- Copia o descarga el código minificado como archivo .min.js.
Qué cambia la minificación, con un ejemplo
Toma esta función (152 bytes):
// Returns the total price including tax
function totalPrice(items, taxRate) {
const subtotal = items.reduce((sum, item) => sum + item.price, 0);
return subtotal * (1 + taxRate);
}| Paso | Salida | Tamaño |
|---|---|---|
| Eliminar comentarios y espacios en blanco | function totalPrice(items,taxRate){const subtotal=items.reduce((sum,item)=>sum+item.price,0);return subtotal*(1+taxRate)} | 113 bytes |
| + Mangle de nombres locales | function totalPrice(e,t){const r=e.reduce((e,t)=>e+t.price,0);return r*(1+t)} | 78 bytes |
| + Comprimir (integrar la variable temporal) | function totalPrice(e,t){return e.reduce((e,t)=>e+t.price,0)*(1+t)} | 69 bytes |
El nombre de la función totalPrice se conserva porque otro código puede llamarla. Marcar Mangle de nombres de nivel superior también lo acortaría.
Las opciones de Terser, explicadas
| Opción | Qué hace | Riesgo |
|---|---|---|
| Comprimir | Eliminación de código muerto, plegado de constantes, unión de declaraciones, condicionales más cortos (dos pasadas) | Muy bajo con código estándar |
| Mangle de nombres de variables | Renombra las variables locales y los parámetros | Bajo; el código que depende de Function.prototype.name de funciones locales puede cambiar |
| Mangle de nombres de nivel superior | También renombra y elimina las funciones y variables de nivel superior que no se usan | Rompe las variables globales que usan otros scripts o los manejadores HTML en línea |
| Eliminar llamadas console.* | Elimina console.log, console.warn y similares | También se eliminan los argumentos con efectos secundarios |
| Conservar comentarios /*! license */ | Conserva los comentarios que empiezan por /*! o que contienen @license / @preserve | Ninguno; lo exigen muchas licencias de código abierto |
Por qué importa la inserción automática de punto y coma
JavaScript inserta punto y coma en algunos saltos de línea, así que borrar saltos de línea a ciegas puede cambiar lo que hace el código. Por ejemplo, return seguido de un valor en la línea siguiente devuelve undefined, y a seguido de ++b en la línea siguiente incrementa b, no a. La alternativa integrada conserva el salto de línea siempre que quitarlo pueda cambiar el significado, y lo elimina cuando el token anterior es un operador, una coma, un punto y coma o un paréntesis o corchete de apertura. También sabe cuándo una / inicia una expresión regular y no una división, así que patrones como /[/]+/g y cadenas que contienen // nunca se confunden con comentarios.
Preguntas frecuentes
¿Qué hace un minificador de JavaScript?
Reescribe tu código en la forma equivalente más pequeña: elimina los comentarios y los espacios en blanco, acorta los nombres de las variables locales (mangling) y simplifica las expresiones (compresión). El código se comporta igual, pero se descarga y se analiza más rápido.
¿Es seguro usar JavaScript minificado en producción?
Sí, para eso sirve la minificación. Terser es el minificador que usan webpack, Vite y Rollup. Conserva el código fuente original para editarlo y depurarlo, y prueba la versión minificada antes de desplegarla.
¿Qué diferencia hay entre compress y mangle?
Compress reescribe el código: elimina el código inalcanzable, une declaraciones de variables, pliega constantes y acorta las sentencias if. Mangle renombra las variables locales y los parámetros de las funciones con una o dos letras. Usar ambos da el archivo más pequeño.
¿Cuándo debo activar Mangle de nombres de nivel superior?
Solo cuando el script es autónomo, como un bundle o un módulo ES. El mangle de nivel superior renombra las funciones y variables globales, lo que rompe el código al que otros scripts o los atributos onclick del HTML llaman por su nombre.
¿Qué pasa si Terser no se puede cargar?
Terser se carga desde un CDN la primera vez que minificas. Si falla, por ejemplo sin conexión o detrás de un firewall, el minificador integrado elimina los comentarios y los espacios en blanco y saltos de línea innecesarios respetando las cadenas, los template literals, las expresiones regulares y la inserción automática de punto y coma. La página te indica qué motor se ejecutó.
¿Por qué me da un error de sintaxis?
El minificador primero tiene que analizar tu código, así que el JavaScript no válido se rechaza indicando la línea y la columna del problema. Las causas habituales son un paréntesis o llave que falta, un carácter suelto, o sintaxis de TypeScript o JSX, que hay que compilar a JavaScript normal antes de minificar.
¿Se sube mi código?
No. La minificación se ejecuta en tu navegador. Solo se descarga la propia biblioteca Terser desde un CDN público; tu código fuente nunca se envía a ningún sitio.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.