Minificador de JavaScript
El peso de una página moderna recae de verdad en el JavaScript. No son solo los bytes que descarga el visitante, sino el script que el navegador tiene después que analizar y ejecutar antes de que la página sea interactiva. El código fuente se escribe para personas, con nombres descriptivos, espaciado, comentarios y alguna que otra rama que nunca se ejecuta, y casi nada de eso hace falta desplegar. Esta herramienta ejecuta Terser, el mismo motor al que recurren los empaquetadores, directamente en tu navegador. Pegas un script y recuperas al instante una versión comprimida, con los nombres locales acortados y el código muerto eliminado, con los tamaños original, minificado y gzip juntos para que el ahorro nunca sea una conjetura. Lee el JavaScript correctamente, así que la salida es un programa seguro y equivalente, y nada de lo que pegas sale de esta pestaña.
- Ejecuta Terser, el mismo minificador que usan los empaquetadores en las builds de producción, así que lee tu código en un árbol de sintaxis y lo transforma de forma segura en vez de adivinar
- No solo borra espacios: elimina el código muerto, pliega las constantes y acorta los nombres locales para quitar peso de verdad, que es de donde sale el ahorro resistente a gzip
- Muestra juntos los tamaños original, minificado y gzip, para que juzgues el resultado por lo que un servidor envía de verdad y no por el recuento de bytes en bruto
- Se ejecuta por completo en tu navegador, así que el código que pegas, incluido el trabajo propietario, se queda en tu dispositivo y desaparece cuando cierras la pestaña
Resumen
Minificar JavaScript es más delicado que minificar CSS, porque reescribes un programa en lugar de recortar texto, así que la precisión es lo que más importa. Esta herramienta se apoya en Terser para hacerlo bien, y muestra las cifras que demuestran que valió la pena.
- 01
Terser por debajo
El mismo minificador que usan los principales empaquetadores en las builds de producción. Lee tu código en un árbol y lo transforma de forma segura, en vez de adivinar con reglas de texto.
- 02
Una compresión que quita peso de verdad
Se elimina el código muerto y las ramas que nunca se ejecutan, se pliegan las constantes, se simplifican las expresiones y se agrupan las sentencias redundantes. Estas son las ganancias estructurales a las que quitar solo espacios en blanco nunca puede llegar.
- 03
Nombres locales más cortos
Las variables locales y los parámetros se renombran a uno o dos caracteres, mientras que las variables globales de nivel superior y las palabras reservadas quedan intactas, así que el programa sigue funcionando y los bytes siguen bajando.
- 04
Comentarios de licencia conservados
Los banners de licencia y de preserve que requiere el código abierto pueden quedarse, mientras que el resto de los comentarios se eliminan de la salida.
- 05
Un desglose de tamaño en el que puedes confiar
Los tamaños original, minificado y gzip se actualizan a medida que escribes, junto con el porcentaje exacto ahorrado. La cifra de gzip es la que refleja lo que atraviesa la red.
- 06
Copiar, descargar o subir
Pega desde el portapapeles, carga un archivo del disco y luego copia el resultado o guárdalo como archivo min.js. Todo el ciclo ocurre en local en cuestión de segundos.
Cómo usarla
Convierte un código fuente legible en un script mínimo y listo para producción en unos pocos pasos, con el ahorro en pantalla todo el rato.
- 01
Pega tu JavaScript en el panel de entrada, o usa «Subir» para cargar un archivo directamente.
- 02
Elige tus opciones. Mantén «Comprimir» y «Acortar nombres» activados para la salida más pequeña, y conserva los comentarios de licencia si distribuyes un banner.
- 03
Observa el desglose debajo de las opciones para confirmar la ganancia, con los tamaños original, minificado y gzip y el porcentaje ahorrado.
- 04
Si la entrada tiene un error de sintaxis, se muestra el mensaje para que lo corrijas. Si no, copia el resultado o descárgalo como archivo min.js.
- 05
Conecta el archivo minificado a la página o al paso de build que sirve tus scripts de producción.
Detalles
Los detalles que hacen que la salida sea segura de desplegar y rápida de confiar.
- Construido sobre Terser, el minificador de JavaScript estándar que se usa en los principales empaquetadores.
- Admite la sintaxis moderna, incluidas las funciones flecha, las clases, async y await, las plantillas de texto y el encadenamiento opcional.
- El tamaño de gzip se mide con la compresión integrada en tu navegador, así que la cifra coincide con lo que transferiría un servidor real.
- Un error de sintaxis se informa en el sitio junto con su mensaje, en lugar de producir en silencio una salida rota.
- No se sube ni se registra nada. El código que pegas, incluido el trabajo propietario, se queda en tu navegador y desaparece cuando cierras la pestaña.
Casos de uso
Dónde compensa comprimir el JavaScript a lo esencial.
-
Páginas más rápidas y más interactivas
Un script más pequeño se descarga, analiza y ejecuta antes, lo que mejora el Time to Interactive y los Core Web Vitals que afectan tanto a los usuarios como al posicionamiento en buscadores.
-
Un paso de build sin empaquetador
En un sitio estático, un widget o un fragmento que incrustas en otro sitio, pega el script aquí para la misma minificación que aplicaría un pipeline, sin ninguna cadena de herramientas que montar.
-
Distribuir un script incrustable
Cuando otros van a colocar tu script en sus páginas, lo que quieres entregarles es un único archivo mínimo, así que minifica antes de publicar el distribuible.
-
Adelgazar código generado
Las bibliotecas de proveedores y los bundles generados a veces llegan sin minificar. Pásalos por aquí para recuperar los bytes antes de que lleguen a tus usuarios.
Ver también
¿Vas a desplegar estilos junto con tus scripts? Combínalo con el Minificador de CSS , y cuando prefieras expandir y ordenar el código en lugar de encogerlo, el Formateador de SQL formatea en la dirección contraria.
Qué hace realmente un minificador de JavaScript
Minificar JavaScript va mucho más allá de borrar espacios. Como reescribe el propio programa, ayuda conocer las piezas: qué hace cada paso y por qué el resultado sigue ejecutándose igual.
-
Espacios en blanco y puntuación
Se quitan la indentación, los saltos de línea y los puntos y coma innecesarios, y las reglas del parser permiten prescindir por completo de muchos de ellos. Es la capa más barata y segura, y la que gzip recuperaría en su mayor parte por sí solo.
-
Compresión, la pasada estructural
Terser evalúa las expresiones constantes, elimina el código que nunca se ejecuta, inserta en línea los valores simples y agrupa las sentencias. De aquí sale el ahorro real, el que gzip no puede alcanzar, porque quita contenido en lugar de formato.
-
Renombrar los nombres locales
Un nombre local largo y descriptivo se convierte en una sola letra. Solo se tocan los nombres que es seguro cambiar. Las variables globales, las propiedades de objeto y todo lo exportado se dejan igual, así que el programa se comporta de la misma manera.
-
Qué queda intacto
Los nombres públicos, las claves de propiedad de objeto, el contenido de las cadenas y las palabras reservadas se conservan por defecto. Por eso el código minificado sigue comunicándose correctamente con otros scripts y con la página, porque el contrato visible no cambia.
-
Por qué gzip es la cifra honesta
Los servidores comprimen el JavaScript con gzip o brotli, y estos ya exprimen los espacios en blanco y los tokens repetidos. Minificar sigue ganando al eliminar ramas enteras y acortar nombres, pero siempre debes juzgar el resultado por el tamaño de gzip y no por los bytes en bruto.
-
Minifica, no ofusques
La minificación busca el programa equivalente más pequeño y lo mantiene depurable con un source map. La ofuscación hace el código difícil de leer a propósito, y a menudo más grande y lento. Tienen objetivos distintos, y esta herramienta hace lo primero.
Buenas prácticas
Hábitos que mantienen el JavaScript minificado pequeño y fiable a la vez.
- Minifica como último paso de la build y despliega su salida. Nunca edites a mano el código minificado ni lo commitees como tu fuente de verdad.
- Juzga el ahorro por el tamaño de gzip, ya que es lo que transfiere el servidor. Una reducción grande en bruto a menudo se encoge una vez que se aplica la compresión.
- Genera un source map junto al archivo minificado, para que los stack traces de producción y el depurador sigan apuntando a tu código real.
- Mantén «Comprimir» y «Acortar nombres» activados en producción; pero si un runtime depende de un nombre de función, como hacen algunos frameworks, protege ese nombre en lugar de desactivar el renombrado para todo.
- Sirve el archivo minificado con gzip o brotli y una caché de larga duración. La minificación y la compresión de transporte se suman en lugar de sustituirse.
Limitaciones
Lo que hace esta herramienta y lo que deja para otros pasos.
- Minifica un único archivo de JavaScript. No empaqueta módulos, no resuelve los import ni sigue las referencias a otros archivos.
- Minifica pero no transpila. Reducir la sintaxis moderna a una versión anterior para navegadores antiguos es un trabajo aparte de una herramienta como Babel o esbuild.
- El código fuente escrito en TypeScript o con JSX debe compilarse antes a JavaScript puro, ya que aquí solo se lee JavaScript estándar.
- La generación de source maps y la ofuscación quedan fuera del alcance. Esta herramienta se centra en producir el programa equivalente más pequeño que siga siendo depurable.
Preguntas frecuentes
Preguntas frecuentes sobre minificar JavaScript, qué cambia y cuándo usarlo.
¿Minificar romperá mi JavaScript?
No, siempre que la entrada sea válida. Terser lee tu código en un árbol y solo aplica cambios que mantienen el comportamiento igual. Renombra las variables locales, elimina el código muerto y acorta las expresiones sin cambiar lo que hace el programa. Los nombres públicos, las propiedades y los identificadores exportados se dejan igual. Lo único a vigilar es el código que depende de un nombre de función o de variable en tiempo de ejecución, como hacen algunas configuraciones de inyección de dependencias. En ese caso, protege esos nombres o desactiva el renombrado.
¿Qué diferencia hay entre comprimir y acortar nombres?
Comprimir es la pasada estructural. Elimina el código muerto, pliega las constantes y simplifica las expresiones, que es de donde sale la mayor parte del ahorro que gzip no puede alcanzar. Acortar nombres es la pasada de renombrado. Reduce los nombres de las variables locales y los parámetros a uno o dos caracteres. Son independientes, así que puedes ejecutar una u otra o ambas, y juntas producen la salida más pequeña.
¿Qué diferencia hay entre minificar y ofuscar?
Minificar hace el código lo más pequeño posible manteniéndolo equivalente y, con un source map, depurable. La ofuscación hace el código difícil de entender a propósito, a menudo a costa del tamaño y la velocidad. Comparten algunas técnicas pero tienen objetivos opuestos, y esta herramienta minifica en lugar de ofuscar.
¿Admite JavaScript moderno?
Sí. Terser entiende la sintaxis actual, incluidas las funciones flecha, las clases, async y await, los generadores, las plantillas de texto, el encadenamiento opcional y la coalescencia nula. Minifica la sintaxis moderna pero no la reduce a una versión anterior para navegadores antiguos, que es trabajo de un transpilador.
¿Puedo minificar TypeScript aquí?
No directamente, ya que esta herramienta trabaja con JavaScript puro. Compila antes tu TypeScript o JSX a JavaScript, cosa que tu build ya hace, y luego pega o sube esa salida aquí para minificarla.
¿Debería mantener el archivo minificado en mi repositorio?
No. El JavaScript minificado es un artefacto de build, no código fuente. Commitea el código legible que de verdad editas y genera el archivo minificado como último paso antes de servirlo. Meter la salida minificada en el control de versiones hace que las revisiones sean difíciles de leer y las fusiones dolorosas.
¿Se sube mi código a algún sitio?
No. Todo se ejecuta en tu navegador. El JavaScript que pegas, cualquier archivo que subas y el resultado se procesan localmente, nunca se transmiten ni se almacenan, y desaparecen en cuanto cierras la pestaña, así que hasta el código propietario está a salvo.
Herramientas relacionadas
Sigue explorando el resto del kit de herramientas de datos y formatos.