Acerca de: Minificador y embellecedor de código
El minificador de código hace más pequeños tus archivos HTML, CSS y JavaScript para que tus páginas carguen más rápido. También funciona al revés: embellece código minificado para que vuelva a ser legible al depurar o aprender.
Cómo funciona
Cada lenguaje lo procesa un motor especializado y muy utilizado:
- JavaScript → Terser. Elimina espacios y comentarios, acorta los nombres de variables locales, quita el código inalcanzable y simplifica expresiones, sin cambiar lo que hace el código. Los nombres globales se mantienen para que otros scripts sigan funcionando.
- CSS → CSSO. Además de quitar espacios, reestructura la hoja de estilos: une reglas duplicadas, acorta colores (
#ffffff→#fff) y elimina declaraciones sobrescritas. - HTML. Se eliminan los comentarios y los espacios sobrantes, y los bloques
<script>y<style>en línea se minifican con los motores anteriores. El contenido de<pre>y<textarea>se conserva tal cual.
Embellecer usa js-beautify para recuperar la sangría y los saltos de línea.
¿Por qué minificar?
Los archivos más pequeños se descargan y procesan más rápido, sobre todo en redes móviles. Eso mejora las Core Web Vitals y las puntuaciones de velocidad, que influyen en la experiencia de usuario y en el posicionamiento. Minificar suele reducir el JavaScript y el CSS entre un 30 y un 60 % antes de la compresión, y se suma a gzip o Brotli en tu servidor.
Consejos
- Conserva siempre tus archivos fuente originales y legibles. Minifica una copia para producción.
- Prueba el archivo minificado antes de publicarlo, sobre todo el JavaScript que depende de nombres de funciones o clases.
- Embellece código de terceros o minificado para entender qué hace y buscar en él con más facilidad.
- Si usas una herramienta de build (Vite, webpack, esbuild), puede minificar automáticamente. Esta herramienta es ideal para archivos puntuales.