Un fichier JavaScript est écrit pour être lu par des humains : des noms de variables explicites, des commentaires, une indentation soignée. Le moteur du navigateur, lui, se moque complètement de tout cela.
La minification exploite cet écart. Elle produit une version illisible mais plus légère, réservée à la machine.
Définition
La minification est la réécriture automatique d'un fichier pour en réduire la taille sans modifier son comportement. Elle supprime les espaces et les commentaires, raccourcit les noms internes et retire le code que rien ne peut atteindre.
// Avant : 169 caractères
export function totalPanier(lignes, remise = 0) {
const brut = lignes.reduce((somme, ligne) => somme + ligne.prix * ligne.quantite, 0);
return brut * (1 - remise);
}
// Après : 87 caractères, résultat identique
export function totalPanier(n,e=0){return n.reduce((n,e)=>n+e.prix*e.quantite,0)*(1-e)}Les paramètres ont changé de nom sans conséquence, puisqu'ils ne sont visibles que depuis l'intérieur de la fonction. Les propriétés prix et quantite, elles, sont restées intactes : les toucher casserait le lien avec les objets fournis de l'extérieur.
Ce qu'un minifieur se permet, et ce qu'il s'interdit
- Il raccourcit les noms de variables et de paramètres locaux, invisibles hors de leur Portée (scope).
- Il supprime les commentaires, les espaces et les points-virgules facultatifs.
- Il retire le code mort, comme une branche de if dont la condition est toujours fausse.
- Il préserve les noms de propriétés, les chaînes de caractères et tout ce qu'un autre fichier peut désigner par son nom.
Minifier n'est pas protéger. Le code reste parfaitement exécutable, donc parfaitement lisible pour qui prend le temps de le remettre en forme. Une clé secrète glissée dans un fichier envoyé au navigateur reste une clé publiée, minifiée ou non.
Mesurer, plutôt que supposer
La minification n'agit pas seule. Le serveur compresse ensuite le fichier avant de l'envoyer, et cette compression adore les répétitions : un fichier bavard se comprime très bien, ce qui réduit l'écart entre les deux versions.
La seule mesure qui compte est donc la taille réellement transférée, visible dans l'onglet réseau des outils de développement. Un gain spectaculaire sur le disque peut se traduire par quelques kilo-octets sur le réseau, et l'inverse arrive aussi.
Questions fréquentes
Faut-il installer un outil de minification ?
Rarement, car elle est déjà comprise dans le build. Vite minifie en lançant vite build, Webpack le fait dès que son mode vaut production. L'installer séparément ne se justifie que sur un projet sans empaquetage.
Pourquoi mon code minifié ne fonctionne-t-il plus ?
Le coupable habituel est du code qui s'appuie sur un nom que le minifieur a le droit de changer, par exemple la propriété name d'une fonction ou le nom d'une class lu à l'exécution. Le second suspect est une comparaison de noms de constructeurs, à remplacer par une vérification explicite.
Faut-il minifier le code destiné à Node ?
Non, dans la plupart des cas. Un fichier lu depuis le disque local ne traverse aucun réseau, et la lisibilité des erreurs a bien plus de valeur que quelques kilo-octets. L'exception concerne les fonctions déployées chez un hébergeur, où le poids du paquet influe sur le temps de démarrage.