Minificateur JavaScript et CSS

À quoi ça sert

La minification supprime tout ce dont un navigateur n’a pas besoin pour exécuter votre code : espaces, retours à la ligne, commentaires et noms longs. Des fichiers plus légers se téléchargent plus vite, ce qui améliore le temps de chargement et les Core Web Vitals, surtout sur réseau mobile.

Cet outil minifie le JavaScript avec Terser, le minificateur utilisé par webpack, Rollup et Vite, et le CSS avec CSSO, qui restructure aussi les feuilles de style : il raccourcit les couleurs (#ffffff en #fff), supprime les unités et valeurs redondantes (0px 0px en 0) et fusionne les règles qui partagent des sélecteurs ou des déclarations.

Mode d’emploi

1. Collez du code dans le champ Entrée, déposez-y un fichier .js ou .css, ou cliquez sur Exemple.
2. Choisissez JavaScript ou CSS.
3. Pour le JavaScript, Raccourcir les noms de variables renomme les variables locales et les paramètres en lettres uniques. Les noms exportés et globaux ne sont jamais modifiés.
4. Pour le CSS, Fusionner les règles en double combine les règles qui ont les mêmes déclarations.
5. Copiez le résultat ou téléchargez-le. Les compteurs de taille sous chaque champ indiquent le gain obtenu.

Si le JavaScript contient une erreur de syntaxe, le message d’erreur indique la ligne et la colonne pour y aller directement.

Exemple

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

devient

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

Quand l’utiliser

Utilisez-le pour un besoin ponctuel : un extrait pour un CDN, un script inline dans un e-mail HTML, un bookmarklet, ou pour voir jusqu’où une bibliothèque peut maigrir. Dans un vrai projet, votre bundler doit minifier à chaque build pour que le code source reste lisible.