La minification peut-elle casser mon code ?

Terser est prudent par défaut et préserve la sémantique. Le mangle ne renomme que les variables non exportées et compress évite toute transformation qu'il ne peut pas prouver sûre. Si vous dépendez de Function.name ou d'un eval sur la source, désactivez le mangle sur ce fichier.

Quel gain de taille peut-on attendre ?

Du code JavaScript se réduit en général de 40 à 70%. Du code avec des commentaires longs, des noms verbeux ou des branches inutilisées rétrécit davantage. Du code déjà concis ou plein de chaînes littérales rétrécit moins. Après gzip l'écart se resserre.

Quelle différence entre minify, compress et mangle ?

Minify est le terme générique. Compress applique des transformations comme le repliement de constantes ou la suppression de branches mortes. Mangle renomme les identifiants en noms courts. On peut activer chacun seul ; les trois ensemble donnent souvent la sortie la plus compacte.

Faut-il minifier si le serveur fait déjà gzip ou brotli ?

Oui. Gzip réduit la redondance dans le texte mais ne renomme pas les variables longues et ne supprime pas les branches mortes. Le code minifié se compresse mieux et se parse plus vite au chargement. Les deux étapes s'additionnent, elles ne se chevauchent pas.

Cela fonctionne avec TypeScript ou la syntaxe moderne ES2022 ?

Le TypeScript pur doit être compilé d'abord car Terser ne lit que du JavaScript. La syntaxe moderne jusqu'à ES2022 (champs privés, top-level await, chaînage optionnel) est lue directement, sans passage par Babel.

Minificateur JS

Minifiez le code JavaScript pour réduire la taille des fichiers

Taille originale

// 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,
  };
})();

Paramètres

ExempleVersion cible

Obfusquer les variablesCompresserSupprimer console.logGarder les noms de classesGarder les noms de fonctions

Ctrl+Entrée pour minifier

Qu'est-ce que Minificateur JS ?

Le minificateur JS compresse le code JavaScript en supprimant les espaces, les commentaires et en raccourcissant les noms de variables grâce au moteur Terser. Cela réduit la taille des fichiers pour des chargements de page plus rapides et des coûts de bande passante moindres, tout en préservant la fonctionnalité du code.

Le minificateur exécute Terser localement sur votre code : il enlève les espaces et les commentaires, renomme les variables locales en lettres uniques quand mangle est actif, applique des transformations AST sûres avec compress activé, et peut supprimer les appels à console.log. L'outil affiche taille originale, taille minifiée et pourcentage économisé pour confirmer le gain avant déploiement.

Comment utiliser

Collez votre code JavaScript dans l'éditeur ou importez un fichier .js.
Choisissez les options de minification : activez le mangling (raccourcissement des noms de variables), la compression et la suppression des appels console.log.
Cliquez sur Minifier pour traiter le code. Vérifiez le pourcentage de réduction et téléchargez le fichier minifié ou copiez-le dans le presse-papiers.

Quand l'utiliser

Compresser un bundle JavaScript avant de l'envoyer sur un CDN sans étape de build.
Retirer les commentaires et les appels console d'une bibliothèque avant de la coller dans un thème CMS.
Produire une version minifiée ponctuelle pour un widget de chat, un pixel publicitaire ou un script tiers.

Résultat

Vous disposez d'une bibliothèque utilitaire de 45 Ko avec des commentaires extensifs et de longs noms de variables. Collez-la, activez le mangling et la compression, et obtenez une sortie de 12 Ko — une réduction de 73 % prête pour le déploiement en production.

FAQ

La minification peut-elle casser mon code ?: Terser est prudent par défaut et préserve la sémantique. Le mangle ne renomme que les variables non exportées et compress évite toute transformation qu'il ne peut pas prouver sûre. Si vous dépendez de Function.name ou d'un eval sur la source, désactivez le mangle sur ce fichier.
Quel gain de taille peut-on attendre ?: Du code JavaScript se réduit en général de 40 à 70%. Du code avec des commentaires longs, des noms verbeux ou des branches inutilisées rétrécit davantage. Du code déjà concis ou plein de chaînes littérales rétrécit moins. Après gzip l'écart se resserre.
Quelle différence entre minify, compress et mangle ?: Minify est le terme générique. Compress applique des transformations comme le repliement de constantes ou la suppression de branches mortes. Mangle renomme les identifiants en noms courts. On peut activer chacun seul ; les trois ensemble donnent souvent la sortie la plus compacte.
Faut-il minifier si le serveur fait déjà gzip ou brotli ?: Oui. Gzip réduit la redondance dans le texte mais ne renomme pas les variables longues et ne supprime pas les branches mortes. Le code minifié se compresse mieux et se parse plus vite au chargement. Les deux étapes s'additionnent, elles ne se chevauchent pas.
Cela fonctionne avec TypeScript ou la syntaxe moderne ES2022 ?: Le TypeScript pur doit être compilé d'abord car Terser ne lit que du JavaScript. La syntaxe moderne jusqu'à ES2022 (champs privés, top-level await, chaînage optionnel) est lue directement, sans passage par Babel.

Minificateur JS

Taille originale

Paramètres

Qu'est-ce que Minificateur JS ?

Comment utiliser

Quand l'utiliser

Résultat

FAQ

Outils similaires

Générateur de données structurées

Page web en PDF

Générateur de politique de confidentialité

Générateur de conditions d'utilisation

Générateur de Consentement aux Cookies

Minificateur CSS

Minificateur JS

Taille originale

Paramètres