À propos de cet outil
La minification JavaScript réduit la taille du code source en supprimant les caractères inutiles et (avec les minificateurs appropriés) en renommant les variables locales en noms plus courts. La première catégorie – suppression des espaces et des commentaires – est simple et sans risque. La seconde – renommer les variables – nécessite de comprendre les règles de portée et c'est ce que les minificateurs de production comme Terser et esbuild font de mieux.
Cet outil se concentre sur une minification sécurisée : suppression des commentaires, réduction des espaces, suppression des points-virgules redondants et raccourcissement des modèles évidents. Le renommage des variables est conservateur : seules les variables locales dans des portées claires sont touchées et les noms référencés en externe sont laissés seuls. Le résultat est fonctionnellement identique à la source.
Pour la minification de niveau production, des outils dédiés (Terser, esbuild, swc) comprennent le modèle de portée ECMAScript complet et produisent une sortie nettement plus petite. Cet outil est destiné à une minification rapide côté navigateur lorsqu'une configuration de construction complète n'est pas disponible.
Pourquoi réduire JavaScript
Les bundles JavaScript constituent généralement la ressource la plus importante sur une page Web moderne. La minification produit régulièrement une réduction de taille de 30 à 60 % par rapport à la source non minifiée. En combinaison avec gzip ou Brotli, la réduction diminue quelque peu, mais la combinaison permet toujours d'économiser des octets mesurables, en particulier pour les utilisateurs disposant de connexions lentes.
Un JavaScript plus rapide signifie également un temps d'interactivité plus rapide. Les scripts plus petits se téléchargent, analysent plus rapidement et s'exécutent plus tôt. Pour les sites où le TTI affecte les taux de rebond et le classement SEO, la minification est l'un des gains les moins chers disponibles.
Comment l'utiliser
Collez JavaScript, obtenez une version plus petite.
- Ajouter une entrée JavaScript: Collez la source dans la zone de saisie ou déposez un fichier .js. Le minifier accepte le JavaScript moderne (ES2015+), y compris les fonctions fléchées, les littéraux de modèles, les classes et les modules.
- Choisissez les options: Les valeurs par défaut suppriment les commentaires et réduisent les espaces. Le renommage des variables locales est conservateur ; activez un renommage plus agressif si vous avez besoin d’une compression maximale.
- Réduire: Le minificateur analyse la source, supprime les espaces et les commentaires et émet une sortie compacte. Les erreurs de syntaxe dans la source produisent des messages d'erreur clairs.
- Utiliser la sortie: Remplacez votre source de script en production. Pour une optimisation complète, associez-le à un bundler qui gère le tremblement d’arborescence et l’élimination du code mort.
Cas d'utilisation courants
Détails techniques
Le minificateur tokenise JavaScript à l'aide d'un analyseur qui respecte la syntaxe ECMAScript. Les commentaires (sur une seule ligne et sur plusieurs lignes) sont supprimés, à l'exception des commentaires de licence marqués de /* ! préfixe. Les espaces sont réduits sauf lorsque la syntaxe l'exige (entre les identifiants, après les mots-clés).
Le renommage conservateur des variables raccourcit les variables locales dans des portées simples. Les noms globaux, exports et importés ne sont pas renommés, ce qui briserait les références externes. Pour un renommage approfondi, utilisez Terser ou esbuild avec une analyse appropriée prenant en compte les modules.
Cas extrêmes : l'insertion automatique de point-virgule (ASI) signifie que le minificateur doit conserver les nouvelles lignes dans certains contextes pour éviter de modifier le comportement du programme. Les littéraux de modèle, les littéraux d'expression régulière et JSX (si l'entrée l'inclut) sont conservés exactement car leur contenu peut ne pas être compressé en toute sécurité.
Questions fréquentes
- La minification change-t-elle le fonctionnement de mon code ?
- Non. La minification supprime les espaces et les commentaires, ce qui n'affecte pas l'exécution. Le raccourcissement des variables (mutilation) renomme les variables locales mais préserve le comportement. Les variables globales et les noms exportés restent intacts.
- Dois-je minimiser en développement ou en production ?
- Utilisez uniquement du code minifié en production. Pendant le développement, conservez le code original lisible. La plupart des outils de build (Webpack, Vite, esbuild) gèrent automatiquement la minification dans le cadre du processus de build de production.
- Quelle est la différence entre la minification et l'obscurcissement ?
- La minification réduit la taille tout en gardant le code fonctionnellement lisible s'il est formaté. L'obscurcissement rend intentionnellement le code difficile à comprendre (encodage de chaînes, aplatissement du flux de contrôle). Cet outil se concentre sur la réduction de la taille et non sur l’obscurcissement.
- À quelle réduction de taille dois-je m'attendre ?
- Généralement 30 à 60 % avant gzip. Le code bien commenté avec des noms de variables longs entraîne les plus grandes réductions. Combinés à la compression gzip, les fichiers JavaScript sont souvent 80 à 90 % plus petits que la source d'origine.
- Mon code est-il téléchargé sur un serveur ?
- Non. Le minificateur s'exécute dans votre navigateur.
- Dans quelle mesure mon JavaScript sera-t-il plus petit ?
- Généralement 30 à 60 % de réduction. Le code contenant beaucoup de variables avec des identifiants longs se compresse davantage ; le code lourd en expressions se compresse moins.
- Dois-je minifier à la main ?
- Jamais. Maintenez un JavaScript lisible dans la source. Exécutez la minification en tant qu'étape de construction ou dans le cadre du déploiement.
- Est-ce que ça marche sur TypeScript ?
- TypeScript doit d'abord être compilé en JavaScript à l'aide de tsc ou esbuild. Une fois compilé, le JavaScript résultant peut être réduit.
Related Articles
DeveloperEssential Developer Tools: JSON, Base64, RegEx, and More
A comprehensive overview of the developer utilities every programmer should know, from data format converters to encoding tools.
9 min readDeveloper & SecurityHashing, Encryption, and Encoding Explained: A Developer's Security Guide
Understand the differences between hashing, encryption, and encoding. Learn when to use MD5, SHA-256, Base64, AES, and other cryptographic tools in your applications.
10 min readData & ProductivitySpreadsheet & Data Conversion Guide: Excel, CSV, JSON, and More
Learn how to convert between spreadsheet and data formats like Excel, CSV, JSON, and XML. Practical tips for handling data migration, cleaning, and transformation.
10 min readPrivacy & TechnologyWhy Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk
Discover why browser-based tools are replacing desktop software and cloud uploads. Learn how client-side processing keeps your files private while delivering powerful functionality.
7 min read