Minificador JavaScript
Reduce archivos JavaScript y mira exactamente cuánto ahorraste.
Funciona en tu navegador. Nada de lo que escribes se envía a ningún sitio.
- Acorta nombres de variables
- Muestra bytes ahorrados
- Nada se sube
Cómo minificar JavaScript
- Pega tu JavaScript.
- Desactiva Comprimir o Acortar nombres de variables si necesitas mantenerlos legibles.
- Copia o descarga el archivo minificado.
Qué hace cada opción, Comprimir y Acortar nombres de variables
| Opción | Qué hace |
|---|---|
| Comprimir | Elimina código muerto y simplifica expresiones |
| Acortar nombres de variables | Renombra variables locales a nombres cortos como a, b y c |
Qué se mantiene igual en ambos casos
- Comportamiento público: las mismas entradas siguen produciendo las mismas salidas.
- Cada cadena de texto del código, incluido cualquier texto mostrado a los usuarios.
- El orden en que se ejecutan las operaciones.
- Un comentario /*! ... */, ya que Terser conserva ese estilo por defecto, la convención que usan muchas librerías para los avisos de licencia.
Consejos para minificar JavaScript
- Guarda una copia sin minificar, o genera un mapa de fuente en tu herramienta de build, para que los errores de producción sigan siendo legibles.
- Desactiva Acortar nombres de variables para una librería que van a leer otros desarrolladores, así los mensajes de error mantienen nombres con sentido.
- Ejecuta pruebas contra la salida minificada antes de publicarla, ya que un caso extremo raro en un minificador sigue siendo posible aunque este sea muy usado.
Preguntas frecuentes sobre Minificador JavaScript
¿El JavaScript minificado sigue siendo código válido?
Sí. Funciona exactamente igual que el original, solo con nombres más cortos y sin espacios en blanco de más.
¿Cuánto suele reducirse el JavaScript?
A menudo entre un 30 y un 60 por ciento menos, según cuántos comentarios y nombres de variables largos tenga el original.
¿Qué pasa si mi código tiene un error de sintaxis?
El error se muestra con la línea y la columna donde ocurrió, así puedes corregirlo e intentarlo de nuevo.
¿Cuál es la diferencia entre Comprimir y Acortar nombres de variables?
Comprimir reescribe el código para eliminar ramas muertas y simplificar expresiones. Acortar nombres de variables renombra las variables locales a letras sueltas. Puedes desactivar cada opción por separado.
¿Puede minificar sintaxis moderna como async y funciones flecha?
Sí, incluida la sintaxis de ES2020 y posterior, como el encadenamiento opcional y async o await.
¿Qué minificador usa esto?
Terser, el sucesor estándar de UglifyJS y el minificador que usan por defecto la mayoría de los empaquetadores, incluidos webpack, Rollup y esbuild.
¿Puede minificar romper mi código?
No debería cambiar el comportamiento en código normal. El código que lee el nombre original de una función o variable en tiempo de ejecución, por ejemplo mediante trucos de introspección no estándar, puede romperse una vez que se acortan los nombres. Desactiva Acortar nombres de variables si eso te aplica.
¿Admite sintaxis de TypeScript?
No, esto espera JavaScript plano. Las anotaciones de tipo de TypeScript no son JavaScript válido y provocarán un error de sintaxis aquí, así que compila primero TypeScript a JavaScript.