Passer au contenu
🛠️
Whiz Tools

Minimiseur JavaScript - Optimiseur de Code JS en Ligne Gratuit

Outil gratuit de minimisation JavaScript pour réduire la taille du code en supprimant les espaces et les commentaires. Optimisez instantanément les fichiers JS sans installation requise.

Minificateur JavaScript

À propos de cet outil

Ce minificateur JavaScript simple supprime les espaces et les commentaires inutiles pour réduire la taille de votre code. Il préserve la fonctionnalité tout en rendant votre code plus compact.

  • Supprime les espaces blancs inutiles (espaces, tabulations, sauts de ligne)
  • Supprime les commentaires (sur une seule ligne et sur plusieurs lignes)
  • Préserve les littéraux de chaîne et les expressions régulières
  • Maintient la fonctionnalité du code
Calculateur de chargement...
📚

Documentation

Qu’est-ce qu’un minificateur JavaScript ?

Un minificateur JavaScript est un outil qui réduit le code source JavaScript en supprimant les caractères dont un navigateur n’a pas besoin pour l’exécuter, comme les espaces superflus, les sauts de ligne et les commentaires. Après la minification, le code fait exactement la même chose. Seule la taille du fichier change.

Les fichiers JavaScript plus petits se téléchargent et se chargent plus rapidement ; la minification est donc une étape courante avant la mise en ligne d’un site web.

Fonctionnement de la minification JavaScript

Cet outil lit le code caractère par caractère et le reconstruit en supprimant tout ce dont les lecteurs ont besoin, mais pas le moteur JavaScript. Il supprime :

  • Les commentaires, qu’il s’agisse de commentaires // single-line sur une seule ligne ou de commentaires /* multi-line */ sur plusieurs lignes, y compris les commentaires de style JSDoc.
  • Les espaces, tabulations et lignes vides superflus qui servent uniquement à rendre le code plus facile à lire.

Il n’ajoute ni ne supprime rien d’autre. Il ne supprime jamais un point-virgule, une parenthèse ou tout autre caractère déjà présent dans le code, et n’insère jamais de nouvelle ponctuation. Il laisse également plusieurs éléments inchangés :

  • Le texte à l’intérieur des chaînes ("like this", 'like this') et des littéraux de gabarit (`like this`), même si ce texte contient des espaces ou ressemble à un commentaire.
  • Les littéraux d’expression régulière, comme /[a-z]+/g, ainsi que tous leurs indicateurs : d, g, i, m, s, u, v et y.
  • Chaque point-virgule, virgule et crochet déjà présent dans le code d’origine.

Parfois, un espace entre deux jetons ne peut pas être supprimé sans en modifier le sens. return a ne peut pas devenir returna, car cela serait lu comme un seul mot. Il en va de même pour les noms écrits avec des lettres qui ne font pas partie de l’alphabet anglais : typeof π conserve donc son espace. Lorsque la suppression d’un espace fusionnerait deux jetons, l’outil conserve un seul espace.

Un saut de ligne peut également avoir son importance. JavaScript insère parfois automatiquement un point-virgule à la fin d’une ligne, selon une règle appelée insertion automatique de point-virgule. Si la suppression d’un saut de ligne pouvait déclencher ou empêcher cette règle, ou si le saut de ligne suit une accolade fermante }, l’outil conserve un seul saut de ligne à cet endroit. C’est pourquoi le code minifié n’est pas toujours regroupé sur une seule ligne : certains sauts de ligne modifient le sens du code et doivent être conservés.

Comment utiliser ce minificateur JavaScript

  1. Collez du code JavaScript dans la zone de saisie.
  2. Sélectionnez « Minifier ».
  3. Lisez le résultat dans la zone de sortie, avec la taille d’origine, la taille après minification et le pourcentage de réduction.
  4. Sélectionnez « Copier » pour copier le code minifié.

La minification s’effectue dans l’onglet du navigateur ; le code n’est donc envoyé nulle part pour être traité. L’outil copie également le code collé dans l’adresse de la page, ce qui facilite l’ajout du résultat aux favoris ou son partage. Toute personne qui peut voir cette adresse peut donc voir le code.

Exemple : minifier une fonction

Avant :

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Après :

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Les trois commentaires disparaissent et l’indentation est supprimée. Le point-virgule après a+b reste présent, car l’outil ne supprime jamais un point-virgule déjà présent. Le saut de ligne avant const est également conservé, car il suit une accolade fermante }.

Exemple : minifier une classe

Avant :

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Après :

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Remarquez qu’un saut de ligne est conservé avant chaque méthode et avant l’accolade fermante de la classe }. Chacun de ces sauts suit une accolade fermante } dans le code d’origine ; la règle qui protège l’insertion automatique de point-virgule les conserve donc. Les points-virgules à l’intérieur de chaque méthode restent également présents.

Formule de réduction de la taille

L’outil indique trois nombres sous la zone de sortie : la taille d’origine, la taille après minification et la réduction. Toutes les tailles correspondent à un nombre de caractères, et non d’octets. La réduction est un pourcentage arrondi à l’entier le plus proche :

1reduction = round((1 - minified characters / original characters) x 100)
2

L’exemple de fonction ci-dessus comporte 213 caractères avant la minification et 103 après. Ainsi, 1–103 / 213 = 0,5164, soit 51,64 % ; l’outil affiche donc 52 %. L’exemple de classe passe de 515 caractères à 304, soit 40,97 %, affiché comme 41 %.

Limites de ce minificateur

Cet outil supprime uniquement les commentaires et les espaces. Contrairement aux outils exécutés lors de la construction, comme Terser ou UglifyJS, il ne renomme pas les variables, ne supprime pas le code inutilisé et ne regroupe pas les fichiers. Ces outils produisent généralement une sortie plus petite, mais nécessitent un processus de construction pour fonctionner. Cet outil s’exécute instantanément dans le navigateur, sans configuration, ce qui le destine aux vérifications rapides ou aux petits extraits plutôt qu’à une chaîne complète de production.

Foire aux questions

Que supprime un minificateur JavaScript ?

Il supprime les commentaires et les espaces qui ne sont pas nécessaires à l’exécution du code. Il ne supprime ni les points-virgules, ni les crochets, ni aucun autre caractère déjà présent dans le code.

La minification JavaScript modifie-t-elle son exécution ?

Non. Le code minifié doit produire les mêmes résultats que le code d’origine. Seule la mise en forme change.

Pourquoi le code minifié comporte-t-il parfois encore des sauts de ligne ?

Un saut de ligne peut être requis par la règle d’insertion automatique de point-virgule de JavaScript, ou suivre une accolade fermante }. Le supprimer pourrait modifier le comportement du code ; l’outil conserve donc un seul saut de ligne à ces endroits au lieu de le supprimer.

La minification est-elle la même chose que la compression ?

Non. La minification supprime des caractères du code source lui-même. La compression, comme gzip ou Brotli, encode le fichier différemment pour son transfert sur un réseau. Les sites web utilisent généralement les deux conjointement.

Mon code est-il envoyé à un serveur ?

Le minificateur lui-même s’exécute entièrement dans l’onglet du navigateur, et le code n’est pas envoyé pour être minifié. Le code collé est enregistré dans l’adresse de la page afin que le résultat puisse être partagé ou ajouté aux favoris ; il apparaît donc dans la barre d’adresse du navigateur et dans son historique.

Le code minifié peut-il être reconverti en code d’origine ?

Les espaces peuvent être rétablis par un formateur de code, mais les commentaires ainsi que les noms d’origine des variables et des fonctions ont disparu, sauf si une carte source distincte a été enregistrée.

Références

  1. MDN Web Docs. "Minification." Glossaire MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," section 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," section 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," section 22.2.6, "Properties of the RegExp Prototype Object" (l’ensemble d’indicateurs d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object