Minificador de JS

El Minificador de JS es una herramienta gratuita que elimina los caracteres innecesarios de JavaScript y muestra el número de caracteres antes y después de la minificación.

¿Qué problema resuelve la minificación de JavaScript?

Minificar JavaScript reduce la cantidad de texto del código fuente que debe descargar el navegador. Por lo general, se eliminan elementos de formato como la sangría, los saltos de línea y los espacios cuando la sintaxis de JavaScript no los necesita.

Un script más pequeño puede reducir el tamaño de la transferencia y el trabajo de análisis sintáctico, especialmente si un sitio utiliza varios paquetes grandes. La compresión HTTP, como Brotli o gzip, sigue siendo importante, ya que la minificación y la compresión durante la transferencia resuelven partes distintas del problema. La minificación elimina caracteres del código fuente, mientras que la compresión codifica los datos repetidos de forma más compacta durante la transferencia.

Esta operación suele realizarse durante una compilación previa al despliegue. También resulta útil para revisar un script de terceros sin minificar, comparar tamaños de paquetes o preparar un archivo independiente para un sitio que no dispone de un proceso de compilación.

Que JavaScript se minifique correctamente no demuestra que funcione como debería. Un script puede minificarse sin errores y aun así contener llamadas incorrectas a una API, variables inaccesibles o código que solo falla durante la ejecución.

¿Cómo se usa el Minificador de JS?

Pega el código JavaScript en el campo JS, ejecuta la herramienta y copia el valor devuelto en JS minificado. Conserva el archivo fuente original en el control de versiones y despliega la copia compacta, en lugar de sustituir el código legible.

1. Primero, ejecuta una comprobación de sintaxis, un linter y las pruebas automatizadas sobre el código fuente.
2. Pega el script completo en JS, incluidas las importaciones de módulos o las funciones contenedoras que formen parte del archivo.
3. Consulta Caracteres del JS y Caracteres del JS minificado para ver cómo ha cambiado el número de caracteres.
4. Comprueba que el JavaScript minificado se ejecuta correctamente en el mismo navegador y contexto de despliegue que el archivo de producción.
5. Utiliza un nombre de archivo reconocible, como app.min.js, si vas a guardar juntas las versiones minificada y legible.

El procesamiento se realiza en el servidor. La entrada se envía al servidor mediante HTTPS y no se almacena. Aun así, el servidor debe recibir el código JavaScript para procesarlo, por lo que no debes enviar código fuente que tu organización prohíba compartir con un servicio externo.

¿Qué contiene el resultado minificado?

El resultado incluye el código JavaScript compacto y dos recuentos de caracteres. Caracteres del JS corresponde a la longitud de la entrada, mientras que Caracteres del JS minificado indica la longitud del valor devuelto en JS minificado.

Los recuentos se generan mediante la función mb_strlen de PHP, que mide la longitud de una cadena multibyte en lugar de limitarse a indicar el número de bytes. Por tanto, el número de caracteres no equivale al tamaño final de la transferencia por red. Los caracteres UTF-8 pueden ocupar más de un byte, y gzip o Brotli pueden reducir aún más el archivo transmitido.

Esta herramienta no devuelve un campo independiente de validación o diagnóstico. No esperes que identifique todos los corchetes que faltan, las expresiones regulares mal formadas o las características del lenguaje no compatibles. En particular, los errores asociados a JSON, como los nombres de propiedades sin comillas o las comas finales, no sirven como comprobaciones fiables de JavaScript, ya que la sintaxis de los objetos literales de JavaScript es distinta de la de JSON. Utiliza el Validador y formateador de JSON para los datos JSON.

Ejemplos sencillos y casos complicados

Un cambio sencillo en los espacios puede representarse así.

Entrada

function add(a, b) { return a + b; }

Forma compacta

function add(a,b){return a+b;}

También se puede eliminar el formato alrededor de un objeto sin modificar los valores de sus propiedades.

Entrada

const settings = { theme: "dark", retries: 2 };

Forma compacta

const settings={theme:"dark",retries:2};

El formato exacto puede variar entre minificadores, especialmente en torno a los puntos y comas opcionales. JavaScript no se puede compactar de forma segura eliminando todos los espacios o saltos de línea. Una minificación segura debe tener en cuenta el contexto léxico y sintáctico para distinguir el formato de los caracteres que afectan al programa.

• Los espacios dentro de cadenas son datos. El espacio de "Newcastle upon Tyne" debe conservarse.
• Los signos de puntuación pueden formar parte de la sintaxis. Eliminar el espacio de a + +b puede generar una secuencia de tokens distinta.
• Los saltos de línea a veces influyen en la inserción automática de puntos y comas, incluido el código situado después de return, break o continue. No se permite un salto de línea inmediatamente después de throw, porque su expresión debe comenzar en la misma línea.
• Los caracteres acentuados y no latinos pueden aparecer en cadenas y, cuando lo permitan las reglas de los identificadores de JavaScript, también en identificadores. Su tamaño en bytes puede ser distinto de su número de caracteres.
• Los números son tokens del código fuente, no instrucciones para el recuento de caracteres. El minificador debe conservar su valor numérico, aunque elija una notación equivalente más corta.

¿Cuándo no merece la pena minificar JavaScript?

Por lo general, no merece la pena repetir la minificación si un archivo ya está minificado. Una segunda pasada puede ahorrar muy poco o nada, además de dificultar el seguimiento de los archivos generados por la compilación y llegar a interferir con los mapas de código fuente existentes.

Tampoco tiene mucho sentido dar formato y después minificar un JavaScript que solo va a leer una máquina. Conserva un código fuente legible para facilitar el mantenimiento y genera a partir de él los archivos de despliegue. En una aplicación consolidada, una herramienta de compilación como esbuild, Rollup o webpack suele ser más adecuada, porque permite automatizar el empaquetado de módulos y la generación de mapas de código fuente. La minificación puede estar integrada o añadirse mediante la configuración o un plugin, mientras que Terser es un minificador específico.

No confundas la minificación con la ofuscación o el control de acceso. Los nombres de funciones y variables pueden seguir siendo visibles, las cadenas de texto aún se pueden leer y las herramientas para desarrolladores del navegador permiten volver a dar formato al código compacto. Nunca incluyas secretos, claves privadas ni credenciales privilegiadas en JavaScript del lado del cliente.

Si estás preparando todos los recursos estáticos de una página, el Minificador de CSS y el Minificador de HTML pueden aplicar la operación correspondiente a esos formatos. Utiliza una herramienta distinta para cada formato, ya que sus reglas de análisis y espacios en blanco son diferentes.

Preguntas frecuentes

¿La herramienta genera un mapa de código fuente?

No, no se devuelve ningún campo de mapa de código fuente. Si necesitas relacionar las trazas de pila de producción con los archivos originales, genera el script minificado y su archivo .map correspondiente dentro del mismo proceso de compilación. Desplegar un mapa de código fuente procedente de otra compilación puede producir referencias engañosas de líneas y columnas.

¿Minificar JavaScript impide que otras personas lo copien?

No. Los navegadores deben recibir código ejecutable del lado del cliente, por lo que cualquier visitante puede descargarlo e inspeccionarlo. La minificación hace que el código fuente sea menos legible, pero no aporta confidencialidad, no sirve para hacer cumplir licencias ni ofrece una protección significativa para los secretos incluidos en el código.

¿Puedo pegar código que contenga claves de API?

No debes pegar claves de API secretas, tokens ni credenciales privadas. La entrada se envía mediante HTTPS y no se almacena, pero el procesamiento se realiza en el servidor. Las claves públicas del navegador que se distribuyen deliberadamente a todos los visitantes también deben contar con restricciones de dominio, origen, cuota o permisos cuando el servicio correspondiente las admita.

¿Un menor número de caracteres siempre hace que la página cargue más rápido?

No. El efecto depende del tamaño original del archivo, la caché, las condiciones de la conexión, la compresión del servidor y la cantidad de JavaScript que el navegador deba analizar y ejecutar. Comprueba el tamaño de la transferencia comprimida y el comportamiento durante la ejecución, además de los recuentos de caracteres.

¿Debo conservar la extensión .js después de minificar?

Sí. El JavaScript minificado normalmente conserva la extensión .js, y se utiliza .min.js como convención de nomenclatura cuando están disponibles ambas versiones. Antes del despliegue, confirma que el servidor envía un tipo de contenido adecuado para JavaScript y que el HTML o la importación del módulo apuntan al archivo previsto.