Softonic

Minificador de JavaScript

Paso 1 / 3
Siguiente

Pega JavaScript y obtén una versión minificada que es un 40-70% más pequeña, espacios en blanco eliminados, variables acortadas a letras individuales, ramas muertas eliminadas, constantes plegadas y (si lo habilitas) comentarios eliminados. Útil para verificaciones rápidas de tamaño, incrustaciones únicas y páginas de aterrizaje donde no estás ejecutando una cadena de herramientas de construcción completa.

Cómo minificar JavaScript

  1. 1

    Pega el código fuente

    Cualquier JavaScript válido ES5+. Para ES6 y posteriores (literales de plantilla, clases, módulos), asegúrate de que tu objetivo coincida.

  2. 2

    Elige la agresividad

    Seguro (espacios en blanco + comentarios), predeterminado (+ renombrado de variables), agresivo (+ enmascarar propiedades, puede romper el acceso al DOM).

  3. 3

    Minificar

    La herramienta ejecuta una transformación compatible con Terser y devuelve el resultado con conteos de bytes antes y después.

  4. 4

    Copia o descarga

    Pega la salida en una etiqueta `<script>` o guarda como un `.min.js` para servir desde tu CDN.

Dónde van los bytes

Un archivo minificado típico es un 40-70% más pequeño que el original. Envolverlo en gzip (o Brotli, que Cloudflare y la mayoría de los CDNs utilizan) reduce otro 60-75%. Combinado, un origen de 100 KB puede enviarse como ~15-25 KB por la red.

Origen Minificado +gzip +Brotli
jQuery 3.6 87 KB 30 KB 27 KB
Lodash 4.17 71 KB 25 KB 22 KB
React + ReactDOM 18 140 KB 44 KB 39 KB

Técnicas aplicadas

Técnica Qué hace
Eliminación de espacios Elimina espacios, tabulaciones, saltos de línea
Eliminación de comentarios Elimina // y /* */ (a menos que !important)
Enmascaramiento de variables Renombra userName -> u (seguro en alcance)
Enmascaramiento de propiedades Renombra obj.foo -> obj.a (NO SEGURO)
Plegado de constantes 1 + 2 + 3 -> 6
Eliminación de código muerto Elimina ramas después de return
Inlining de flujo de control Inline funciones pequeñas usadas una vez
Compresión de literales de cadena Fusiona constantes de cadena repetidas

Modo seguro vs agresivo

  • Seguro mantiene los nombres de las variables, solo elimina espacios en blanco. Bueno para depuración donde deseas trazas de pila legibles.
  • Predeterminado enmascara locales pero mantiene nombres globales y de propiedades. Funciona con la mayoría del código.
  • Agresivo enmascara todo, incluidos los nombres de propiedades. A menudo rompe el código que accede a propiedades dinámicamente (obj["prop"], Object.keys(obj)) a menos que configures nombres reservados.

Cuándo minificar: y cuándo no

  • Haz minificación en producción, en cada activo que el navegador descarga.
  • Haz servir un mapa de origen para que las DevTools del navegador puedan mostrar nombres originales al depurar.
  • No minifiques en desarrollo, desperdicias tiempo de construcción y pierdes errores legibles.
  • No minifiques código ya minificado. Los archivos .min.js se reducen en ~1-3% en la re-minificación mientras arriesgas romperlo.

Errores comunes

  • No configurar nombres reservados. El acceso dinámico a propiedades (obj["payment_method"]) se rompe cuando payment_method se enmascara a a.
  • Olvidar mapas de origen. Sin archivos .map, los errores de producción son ilegibles.
  • Minificar CommonJS y ESM juntos. Los sistemas de módulos mixtos necesitan un cuidadoso tree-shaking antes de la minificación.

Preguntas frecuentes

Típicamente un 40-70% más pequeño sin comprimir, reduciendo un 60-75% más cuando se comprime con gzip o Brotli. Un origen de 100 KB a menudo se envía como ~15-25 KB por la red.

El enmascaramiento predeterminado (de variables locales) es casi siempre seguro. El enmascaramiento agresivo de propiedades rompe cualquier código que acceda a propiedades dinámicamente. Configura la lista reserved con cuidado antes de habilitarlo.

Sí, activa “generar mapa de origen” y la herramienta devuelve el código minificado más un archivo .map que mapea cada byte de vuelta al origen original. Sube ambos a tu CDN para que las DevTools puedan mostrar trazas de pila legibles.

Sí, await de nivel superior, campos de clase, métodos privados, coalescencia nula, encadenamiento opcional y separadores numéricos son todos compatibles. Para propuestas muy nuevas (decoradores etapa-3), verifica la bandera específica.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Generador de EditorConfig

Genera un archivo .editorconfig con tu estilo y tamaño de indentación, fin de línea, charset y reglas de espacios para un formato consistente en IDEs y editores.

Herramienta disponible en otros idiomas