Ce dont vous avez besoin
Une feuille de style ou un script à réduire, et un moyen de tester la page ensuite.
Exemple
Les outils ci-dessus font tourner de vrais moteurs. Voici ce qu'ils produisent pour une minuscule feuille de style et un petit script.
CSS avant (127 caractères) et après (67) :
/* header */
.card {
margin: 0px 0px 10px 0px;
color: #ffffff;
background-color: #FF0000;
}
.card {
padding: 0.50em;
}
.card{margin:0 0 10px;color:#fff;background-color:red;padding:.5em}
JavaScript avant (161 caractères) et après (65) :
// add two numbers
function addNumbers(firstNumber, secondNumber) {
const total = firstNumber + secondNumber;
return total;
}
console.log(addNumbers(2, 3));
function addNumbers(d,e){return d+e}console.log(addNumbers(2,3));
Pièges courants
- Ne minifiez pas puis ne modifiez pas à la main ; régénérez depuis la source.
- Les cartes source (source maps) relient le code minifié à l'original dans le débogueur du navigateur ; générez-les avec un outil de build pour un travail de production.
- Minifier des fichiers déjà minifiés n'apporte presque rien.
- Le code qui utilise
eval,Function.prototype.nameou des noms de propriétés sous forme de chaînes peut casser avec le raccourcissement des noms.