¿La minificación puede romper el código?

Terser es conservador por defecto y conserva la semántica. El mangle solo renombra variables no exportadas; compress evita transformaciones que no puede demostrar seguras. Si dependes de Function.name o haces eval del código fuente, desactiva mangle en ese archivo.

¿Qué reducción de tamaño se suele conseguir?

Lo típico es entre un 40 y un 70%. El código con comentarios largos, nombres extensos o ramas inutilizadas se reduce más. El código ya conciso o lleno de literales string se reduce menos. Tras gzip la diferencia se estrecha más.

¿En qué se diferencian minify, compress y mangle?

Minify es el término general. Compress aplica transformaciones a nivel de código como plegado de constantes o eliminación de ramas muertas. Mangle renombra identificadores con nombres cortos. Cada uno funciona solo, pero combinados producen la salida más pequeña.

¿Vale la pena minificar si el servidor ya hace gzip o brotli?

Sí. Gzip reduce la redundancia en texto pero no renombra variables largas ni elimina ramas muertas. El código minificado se comprime mejor y se parsea más rápido al cargarse. Las dos etapas suman, no se solapan.

¿Funciona con TypeScript o con sintaxis moderna ES2022?

El TypeScript puro hay que compilarlo antes porque Terser solo consume JavaScript. La sintaxis moderna hasta ES2022 (campos privados, top-level await, optional chaining) se procesa directamente sin pasar por Babel.

Minificador de JS

Minifica código JavaScript para reducir el tamaño del archivo

Tamaño original

// Utility library — helper functions
(function () {
  "use strict";

/**
   * Debounce a function call.
   * @param {Function} fn - The function to debounce
   * @param {number} delay - Delay in milliseconds
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

// Format a number with commas
  function formatNumber(num) {
    return num.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g,
      ","
    );
  }

// Deep clone an object
  function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
      return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepClone(obj[key]);
      }
    }
    return copy;
  }

console.log("Utilities loaded");

window.Utils = {
    debounce: debounce,
    formatNumber: formatNumber,
    deepClone: deepClone,
  };
})();

// Utility library — helper functions
(function () {
  "use strict";

  /**
   * Debounce a function call.
   * @param {Function} fn - The function to debounce
   * @param {number} delay - Delay in milliseconds
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

  // Format a number with commas
  function formatNumber(num) {
    return num.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g,
      ","
    );
  }

  // Deep clone an object
  function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
      return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepClone(obj[key]);
      }
    }
    return copy;
  }

  console.log("Utilities loaded");

  window.Utils = {
    debounce: debounce,
    formatNumber: formatNumber,
    deepClone: deepClone,
  };
})();

Ajustes

EjemploVersión

Ofuscar variablesComprimirEliminar console.logConservar nombres de clasesConservar nombres de funciones

Ctrl+Enter para minificar

¿Qué es Minificador de JS?

El Minificador de JS comprime el código JavaScript eliminando espacios en blanco y comentarios, y acortando nombres de variables mediante el motor Terser. Esto reduce el tamaño del archivo para cargas de página más rápidas y menores costes de ancho de banda, manteniendo intacta la funcionalidad del código.

El minificador ejecuta Terser localmente sobre tu código: elimina espacios y comentarios, renombra las variables locales a una letra cuando está activo el mangle, aplica transformaciones AST seguras con compress activado y puede quitar las llamadas a console.log. Informa tamaño original, tamaño minificado y porcentaje de ahorro para confirmar el beneficio antes de publicar.

Cómo usar

Pega tu código JavaScript en el editor de entrada o sube un archivo .js.
Elige las opciones de minificación: activa el ofuscado (acorta nombres de variables), la compresión y si quieres eliminar las llamadas a console.log.
Haz clic en Minificar para procesar el código. Revisa la reducción de tamaño y descarga el archivo minificado o cópialo al portapapeles.

Cuándo usar

Comprimir un bundle de JavaScript antes de subirlo a un CDN sin paso de build propio.
Quitar comentarios y sentencias console de una librería antes de pegarla en un tema de CMS.
Generar una versión minificada puntual para un widget de chat, un pixel publicitario o un script de terceros.

Resultado

Tienes una biblioteca de utilidades de 45 KB con abundantes comentarios y nombres de variables largos. Pégala, activa el ofuscado y la compresión, y obtén una salida de 12 KB: una reducción del 73 % lista para su despliegue en producción.

Preguntas frecuentes

¿La minificación puede romper el código?: Terser es conservador por defecto y conserva la semántica. El mangle solo renombra variables no exportadas; compress evita transformaciones que no puede demostrar seguras. Si dependes de Function.name o haces eval del código fuente, desactiva mangle en ese archivo.
¿Qué reducción de tamaño se suele conseguir?: Lo típico es entre un 40 y un 70%. El código con comentarios largos, nombres extensos o ramas inutilizadas se reduce más. El código ya conciso o lleno de literales string se reduce menos. Tras gzip la diferencia se estrecha más.
¿En qué se diferencian minify, compress y mangle?: Minify es el término general. Compress aplica transformaciones a nivel de código como plegado de constantes o eliminación de ramas muertas. Mangle renombra identificadores con nombres cortos. Cada uno funciona solo, pero combinados producen la salida más pequeña.
¿Vale la pena minificar si el servidor ya hace gzip o brotli?: Sí. Gzip reduce la redundancia en texto pero no renombra variables largas ni elimina ramas muertas. El código minificado se comprime mejor y se parsea más rápido al cargarse. Las dos etapas suman, no se solapan.
¿Funciona con TypeScript o con sintaxis moderna ES2022?: El TypeScript puro hay que compilarlo antes porque Terser solo consume JavaScript. La sintaxis moderna hasta ES2022 (campos privados, top-level await, optional chaining) se procesa directamente sin pasar por Babel.

Minificador de JS

Tamaño original

Ajustes

¿Qué es Minificador de JS?

Cómo usar

Cuándo usar

Resultado

Preguntas frecuentes

Herramientas relacionadas

Generador de datos estructurados

Página web a PDF

Generador de política de privacidad

Generador de términos de servicio

Generador de Consentimiento de Cookies

Minificador CSS

Minificador de JS

Tamaño original

Ajustes