Softonic

Minificateur JavaScript

Étape 1 / 3
Suivant

Collez JavaScript et obtenez une version minifiée qui est 40-70% plus petite, espaces supprimés, variables réduites à des lettres uniques, branches mortes supprimées, constantes pliées, et (si vous l’activez) commentaires purgés. Utile pour des vérifications rapides de taille, des intégrations ponctuelles et des pages d’atterrissage où vous n’utilisez pas une chaîne d’outils de construction complète.

Comment minifier JavaScript

  1. 1

    Collez la source

    Tout JavaScript valide ES5+. Pour ES6 et au-delà (littéraux de modèle, classes, modules), assurez-vous que votre cible correspond.

  2. 2

    Choisissez l'agressivité

    Sûr (espaces + commentaires), par défaut (+ renommage de variables), agressif (+ réduction des noms de propriétés, peut casser l'accès DOM).

  3. 3

    Minifiez

    L'outil exécute une transformation compatible avec Terser et renvoie le résultat avec le nombre d'octets avant/après.

  4. 4

    Copiez ou téléchargez

    Collez la sortie dans une balise `<script>` ou enregistrez-la en tant que `.min.js` pour la servir depuis votre CDN.

Où vont les octets

Un fichier minifié typique est 40-70% plus petit que la source. L’envelopper dans gzip (ou Brotli, que Cloudflare et la plupart des CDN utilisent) réduit encore 60-75%. Au total, une source de 100 Ko peut être expédiée comme ~15-25 Ko sur le fil.

Source Minifié +gzip +Brotli
jQuery 3.6 87 Ko 30 Ko 27 Ko
Lodash 4.17 71 Ko 25 Ko 22 Ko
React + ReactDOM 18 140 Ko 44 Ko 39 Ko

Techniques appliquées

Technique Ce qu’elle fait
Suppression des espaces Supprime les espaces, tabulations, nouvelles lignes
Suppression des commentaires Supprime // et /* */ (sauf !important)
Réduction des noms de variables Renomme userName -> u (sûr pour la portée)
Réduction des noms de propriétés Renomme obj.foo -> obj.a (NON SÛR)
Pliage de constantes 1 + 2 + 3 -> 6
Élimination du code mort Supprime les branches après return
Inlining de contrôle de flux Inline les petites fonctions utilisées une fois
Compression de littéraux de chaîne Fusionne les constantes de chaîne répétées

Mode sûr vs agressif

  • Sûr garde les noms de variables, ne supprime que les espaces. Bon pour le débogage où vous voulez des traces de pile lisibles.
  • Par défaut réduit les noms locaux mais garde les globaux et les noms de propriétés. Fonctionne avec la plupart du code.
  • Agressif réduit tous les noms, y compris ceux des propriétés. Cela casse souvent le code qui accède aux propriétés de manière dynamique (obj["prop"], Object.keys(obj)) à moins que vous ne configuriez des noms réservés.

Quand minifier : et quand ne pas le faire

  • Faites la minification en production, sur chaque ressource que le navigateur télécharge.
  • Faites servir une carte source afin que les DevTools du navigateur puissent toujours afficher les noms originaux lors du débogage.
  • Ne faites pas minifier en développement, vous perdez du temps de construction et perdez des erreurs lisibles.
  • Ne faites pas minifier du code déjà minifié. Les fichiers .min.js se réduisent de ~1-3% lors de la re-minification tout en risquant de casser le code.

Erreurs courantes

  • Ne pas configurer les noms réservés. L’accès dynamique aux propriétés (obj["payment_method"]) casse lorsque payment_method est réduit à a.
  • Oublier les cartes sources. Sans fichiers .map, les erreurs de production sont illisibles.
  • Minifier CommonJS et ESM ensemble. Les systèmes de modules mixtes nécessitent un tree-shaking soigneux avant la minification.

Questions fréquentes

Typiquement 40-70% plus petit non compressé, réduisant encore 60-75% lorsqu’il est compressé en gzip ou Brotli. Une source de 100 Ko est souvent expédiée comme ~15-25 Ko sur le fil.

La réduction par défaut (variables locales) est presque toujours sûre. La réduction agressive des noms de propriétés casse tout code qui accède aux propriétés de manière dynamique. Configurez soigneusement la liste reserved avant de l’activer.

Oui, activez “générer une carte source” et l’outil renvoie le code minifié plus un fichier .map qui associe chaque octet à la source d’origine. Téléchargez les deux sur votre CDN afin que les DevTools puissent afficher des traces de pile lisibles.

Oui, await de niveau supérieur, champs de classe, méthodes privées, coalescence nulle, chaînage optionnel et séparateurs numériques sont tous pris en charge. Pour les propositions très récentes (décorateurs de stade 3), vérifiez le drapeau spécifique.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Compteur de FPS

Mesurez les FPS du navigateur avec requestAnimationFrame : lissage, fréquence d'images min et max, seuil d'alerte et graphique facultatif. Tout se passe en local, sans envoi ni API.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Formateur HTML

Mettez du HTML en forme localement dans le navigateur avec une indentation de deux ou quatre espaces. Aucun HTML n’est envoyé ni validé.

Outil disponible dans d’autres langues