À propos de l'outil Minificateur et formateur de code
Le minificateur de code allège vos fichiers HTML, CSS et JavaScript pour que vos pages se chargent plus vite. Il fonctionne aussi dans l'autre sens : embellissez du code minifié pour le rendre de nouveau lisible, pour déboguer ou apprendre.
Comment ça marche
Chaque langage est traité par un moteur spécialisé et largement utilisé :
- JavaScript → Terser. Il supprime les espaces et les commentaires, raccourcit les noms de variables locales, retire le code inatteignable et simplifie les expressions, sans changer ce que fait le code. Les noms globaux sont conservés pour que les autres scripts fonctionnent toujours.
- CSS → CSSO. En plus de supprimer les espaces, il restructure la feuille de style : il fusionne les règles en double, raccourcit les couleurs (
#ffffff→#fff) et supprime les déclarations écrasées. - HTML. Les commentaires et les espaces superflus sont supprimés, et les blocs
<script>et<style>intégrés sont minifiés avec les moteurs ci-dessus. Le contenu de<pre>et<textarea>est conservé à l'identique.
L'option Embellir utilise js-beautify pour rétablir l'indentation et les retours à la ligne.
Pourquoi minifier ?
Des fichiers plus légers se téléchargent et s'analysent plus vite, surtout sur les réseaux mobiles. Cela améliore les Core Web Vitals et les scores de vitesse, qui comptent à la fois pour l'expérience utilisateur et pour le référencement. La minification réduit généralement le JavaScript et le CSS de 30 à 60 % avant compression, et se cumule avec gzip ou Brotli sur votre serveur.
Conseils
- Gardez toujours vos fichiers source originaux et lisibles. Minifiez une copie pour la production.
- Testez le fichier minifié avant de le déployer, surtout le JavaScript qui dépend de noms de fonctions ou de classes.
- Embellissez du code tiers ou minifié pour comprendre ce qu'il fait et y chercher plus facilement.
- Si vous avez un outil de build (Vite, webpack, esbuild), il peut minifier automatiquement. Cet outil est idéal pour des fichiers ponctuels.