Minifier du JavaScript

Comment ça marche

Collez votre code dans le volet de gauche ; la version minifiée apparaît à droite au bout d'un instant. L'outil analyse vraiment le code et comprend ce que vous avez écrit : il supprime espaces, retours à la ligne et commentaires, simplifie des constructions comme if (x) { return a; } else { return b; } en return x ? a : b, et retire le code qui ne peut jamais s'exécuter, par exemple tout ce qui suit un return. Avec le raccourcissement des noms activé, les noms locaux d'une fonction comme total, articles ou fraisLivraison deviennent des lettres uniques comme n, t ou e. Les noms globaux que d'autres scripts peuvent appeler, comme le nom de fonction le plus extérieur totalPanier, restent volontairement intacts pour que votre page continue de fonctionner. Pour retirer les console.log avant la mise en ligne, réglez la deuxième option sur Supprimer. Les commentaires qui commencent par /*! sont toujours conservés. Si le code contient une erreur de syntaxe, rien n'est minifié : vous obtenez la ligne, la colonne et le caractère inattendu. La ligne de résultat donne la taille avant et après en octets et le gain en pourcentage.

Cet outil est aussi connu sous le nom de minifier javascript, minifier js en ligne, compresser javascript, js minify, minificateur javascript.

Qu'est-ce que Minification ?

Minifier du JavaScript, c'est le réécrire sous la forme la plus courte qui fait toujours le même travail. Cela se passe en trois temps : effacer les caractères inutiles (espaces, retours à la ligne, commentaires), simplifier les expressions (conditions courtes, suppression du code jamais exécuté) et raccourcir les noms locaux. Un fichier plus léger se télécharge et s'analyse plus vite, et la page répond plus tôt aux touchers et aux clics.

Qu'est-ce que Mangling ?

Le mangling remplace les noms des variables locales et des paramètres d'une fonction par des noms d'une lettre : articles et fraisLivraison deviennent par exemple n et t. Les noms locaux sont invisibles hors de leur fonction, l'opération est donc sûre, et c'est l'un des plus gros gains de la minification. Les noms globaux ne sont pas touchés, car d'autres scripts et des attributs onclick du HTML peuvent s'en servir.

Deux pièges de la minification

Le premier, ce sont les noms globaux. Si un bouton de votre page appelle onclick="totalPanier()", ce nom doit survivre à la minification. L'outil ne raccourcit jamais les noms les plus extérieurs, seulement les noms locaux à l'intérieur des fonctions ; minifier un fichier de script isolé ne casse donc pas les appels depuis votre HTML. Si votre code accède à une variable locale par son nom via eval ou une chaîne, le raccourcissement le cassera ; désactivez-le dans ce cas.

Le second, c'est le débogage. Quand un code minifié lève une erreur, le navigateur indique par exemple ligne 1, colonne 18342, ce qui ne dit rien sur votre source. Gardez donc toujours la source non minifiée et publiez la copie minifiée. L'outil Formater du JavaScript peut rendre un code minifié lisible si besoin, mais les noms raccourcis ne reviennent pas.

Quel réglage pour quel usage

Script de votre propre site : raccourcissez les noms et supprimez les appels console, pour le résultat le plus léger. Script que vous partagerez ou déboguerez plus tard : gardez les noms ; le gain est un peu plus faible, mais les messages d'erreur restent parlants.

Cet outil minifie un fichier à la fois. Il ne regroupe pas plusieurs fichiers et ne résout pas les imports de modules. Les projets construits avec webpack ou Vite minifient déjà pendant la compilation ; cette page sert aux scripts isolés, aux extraits à coller dans un CMS ou une extension WordPress, et aux essais rapides.

Questions fréquentes

Comment minifier un fichier JavaScript ?

Collez le code dans le volet de gauche de cette page. Le volet de droite l'affiche sans espaces ni commentaires, avec des noms locaux plus courts. Copiez-le ou téléchargez-le en fichier .min.js ; la ligne de résultat indique les octets gagnés.

La minification peut-elle casser mon code ?

Pour un script isolé, en général non : l'outil analyse le code, n'applique que des changements qui gardent son sens et ne raccourcit pas les noms globaux que d'autres scripts pourraient appeler. Si le code accède à une variable locale par son nom via eval ou une chaîne, le raccourcissement le casse ; réglez alors l'option des noms locaux sur Non. Testez une fois le fichier minifié sur votre page avant de le publier.

Que veut dire « Le code n'a pas pu être lu » ?

Le code contient une erreur de syntaxe : une parenthèse ou un guillemet jamais fermé, ou une virgule manquante. Le message donne la ligne, la colonne et le caractère inattendu à cet endroit. Corrigez puis recollez le code, la minification repart d'elle-même.

Mon code est-il envoyé quelque part ?

Non. Le minificateur tourne dans votre navigateur ; votre code ne quitte pas cette page et n'est téléversé sur aucun serveur.