Minificateur JavaScript
Réduisez des fichiers JavaScript et voyez exactement combien vous économisez.
Fonctionne dans votre navigateur. Rien de ce que vous tapez n'est envoyé nulle part.
- Raccourcit les noms de variables
- Affiche les octets économisés
- Rien n'est envoyé
Comment minifier du JavaScript
- Collez votre JavaScript.
- Désactivez Compresser ou Raccourcir les noms de variables si vous devez les garder lisibles.
- Copiez ou téléchargez le fichier minifié.
Ce que font Compresser et Raccourcir les noms de variables
| Option | Ce qu'elle fait |
|---|---|
| Compresser | Retire le code mort et simplifie les expressions |
| Raccourcir les noms de variables | Renomme les variables locales en noms courts comme a, b et c |
Ce qui reste identique dans les deux cas
- Le comportement public : les mêmes entrées produisent toujours les mêmes sorties.
- Chaque chaîne de caractères du code, y compris tout texte affiché aux utilisateurs.
- L'ordre d'exécution des opérations.
- Un commentaire /*! ... */, car Terser garde ce style par défaut, la convention que beaucoup de bibliothèques utilisent pour les bannières de licence.
Conseils pour minifier du JavaScript
- Gardez une copie non minifiée, ou générez une source map dans votre outil de build, pour que les erreurs en production restent lisibles.
- Désactivez Raccourcir les noms de variables pour une bibliothèque que d'autres développeurs liront, pour que les messages d'erreur gardent des noms parlants.
- Faites tourner vos tests sur le résultat minifié avant de le déployer, car un cas limite rare dans un minificateur reste possible même si celui-ci est très utilisé.
FAQ Minificateur JavaScript
Le JavaScript minifié reste-t-il du code valide ?
Oui. Il s'exécute exactement comme l'original, juste avec des noms plus courts et sans espaces superflus.
De combien le JavaScript rétrécit-il en général ?
Souvent de 30 à 60 %, selon le nombre de commentaires et la longueur des noms de variables dans l'original.
Que se passe-t-il si mon code contient une erreur de syntaxe ?
L'erreur s'affiche avec la ligne et la colonne où elle s'est produite, pour que vous puissiez la corriger et réessayer.
Quelle est la différence entre Compresser et Raccourcir les noms de variables ?
Compresser réécrit le code pour retirer les branches mortes et simplifier les expressions. Raccourcir les noms de variables renomme les variables locales en lettres uniques. Vous pouvez désactiver l'une sans l'autre.
Peut-il minifier une syntaxe moderne comme async et les fonctions fléchées ?
Oui, y compris la syntaxe ES2020 et plus récente comme le chaînage optionnel et async ou await.
Quel minificateur est utilisé ici ?
Terser, le successeur standard d'UglifyJS et le minificateur que la plupart des bundlers, dont webpack, Rollup et esbuild, utilisent par défaut.
La minification peut-elle casser mon code ?
Elle ne devrait pas changer le comportement d'un code normal. Un code qui lit le nom d'origine d'une fonction ou d'une variable à l'exécution, par exemple via des astuces d'introspection non standard, peut casser une fois les noms raccourcis. Désactivez Raccourcir les noms de variables si cela vous concerne.
Prend-il en charge la syntaxe TypeScript ?
Non, cela attend du JavaScript pur. Les annotations de type de TypeScript ne sont pas du JavaScript valide et provoqueront une erreur de syntaxe ici, donc compilez d'abord le TypeScript en JavaScript.