Desarrollo Web

JS Minify / Beautify

Comprimir JavaScript para producción o formatear código minificado en un formato legible.


                        
                    

Minifying JavaScript strips whitespace, comments, and line breaks, and often shortens local variable names — none of that changes how the code runs, but it noticeably shrinks the file for a faster load.

How to use it

Common uses

Things to keep in mind

Minification isn't obfuscation — variables get renamed to shrink size, not to hide logic; serious obfuscation needs dedicated specialized tools.

Minified code in production without a source map is hard to debug — the line numbers in error messages won't match the original file.

Artículo sobre esta herramienta: Minificación de JavaScript: la diferencia entre minificar y ofuscar

Preguntas frecuentes

¿Qué herramienta usa el minificador internamente?

Usa terser, un minificador y compresor de JavaScript ampliamente usado que también entiende sintaxis moderna.

¿Por qué es más difícil depurar JavaScript minificado?

Terser acorta los nombres de variables y funciones y elimina espacios y comentarios, y como esta herramienta no genera un source map, las herramientas de desarrollo del navegador no pueden mapear el código minificado a las líneas originales legibles.

¿La minificación romperá mi código?

Para JavaScript sintácticamente válido, la minificación preserva el comportamiento; si hay un error de sintaxis, la herramienta informa la línea y columna para que puedas corregirlo antes de minificar — todo se ejecuta localmente sin subir tu código.

¿En qué se diferencia el tree shaking de la minificación?

El tree shaking elimina del bundle el código que no se usa en ningún sitio, analizando el grafo de dependencias entre módulos durante el build, mientras que la minificación solo acorta la representación textual del código que ya existe — no elimina ninguna función que realmente se ejecute.

¿Es seguro usar JavaScript minificado en producción sin pruebas adicionales?

Sí, la minificación es una transformación puramente sintáctica que mantiene idéntico el comportamiento del programa; cualquier diferencia de comportamiento tras minificar apunta a un fallo en el propio minificador, no a un cambio intencionado en la lógica.

Artículos: Desarrollo Web

HEX, RGB, HSL: por qué existen tantas formas de escribir un color

Por qué los diseñadores suelen preferir HSL antes que HEX al elegir un tono de color a mano.

Minificación de CSS: qué se elimina realmente del archivo y por qué

Por qué el CSS minificado funciona exactamente igual en el navegador, aunque se vuelva ilegible para una persona.

Minificación de HTML: por qué importan los espacios en el marcado

Por qué eliminar espacios dentro de <pre> o un textarea puede romper el aspecto de la página, a diferencia de casi cualquier otro lugar.

Degradados CSS: en qué se diferencia linear de radial y conic

Por qué conic-gradient sirve para gráficos circulares y radial-gradient para un efecto de foco de luz.

El algoritmo de Luhn: cómo se comprueba la corrección de un número de tarjeta

Por qué un número de tarjeta que pasa la verificación de Luhn no significa que esa tarjeta exista realmente.

IBAN: cómo está estructurado un número de cuenta bancaria internacional

Por qué las dos primeras letras de un IBAN son el código de país, no parte del número de cuenta.

Códigos QR: cómo cabe un enlace en un cuadrado de píxeles

Por qué un código QR con un logo en el centro se sigue escaneando aunque parte del patrón esté tapada.

Códigos de barras: en qué se diferencia Code 128 de EAN-13

Por qué los productos en las tiendas casi siempre usan EAN-13 en lugar de Code 128.

Imágenes placeholder: por qué importan las imágenes ficticias durante el desarrollo

Por qué los desarrolladores colocan deliberadamente rectángulos grises en vez de fotos reales mientras se construye el maquetado.