Minification de code : Ce qu'elle fait et quand s'en soucier

Ton fichier JavaScript fait 500KB. Après minification, il fait 150KB. Qu'est-il arrivé à 70% du fichier ?

Principalement des espaces blancs, commentaires et longs noms de variables. Des choses dont les humains ont besoin mais pas les navigateurs.

Ce que la minification retire

Espaces blancs. Indentation, lignes vides, espaces supplémentaires. Les navigateurs n'en ont pas besoin.

Commentaires. Utiles pour les développeurs, invisibles pour les navigateurs. Partis.

Noms longs. calculateTotalPrice devient a. customerData devient b. Même logique, moins de caractères.

Code mort. Certains minificateurs retirent le code qui n'est jamais exécuté.

Les économies réelles

Pour JavaScript :

• Espaces blancs et commentaires : 30-50% de réduction de taille
• Renommage de variables : encore 10-30%
• Suppression de code mort : varie énormément

Pour CSS :

• Principalement espaces blancs et commentaires
• Des sélecteurs plus courts aident mais sont risqués (ils pourraient correspondre à d'autres éléments)

Pour HTML :

• Gains moins spectaculaires
• Généralement juste suppression d'espaces blancs

Quand minifier

Sites web de production. Toujours. Temps de chargement plus rapides, meilleure expérience utilisateur, coûts de bande passante plus bas.

Réponses API. Parfois. La minification JSON économise de la bande passante mais rend le débogage plus difficile.

Outils internes. Peut-être. La vitesse de développement pourrait compter plus que les temps de chargement.

Quand ne pas minifier

Environnements de développement. Déboguer du code minifié est douloureux. Garde les source maps ou ne minifie pas pendant le dev.

Exigences de lisibilité. Certains projets open-source gardent du code lisible à des fins éducatives.

Petits fichiers. Minifier un fichier de 1KB n'économise presque rien et ajoute de la complexité de build.

Au-delà de la minification

Compression Gzip/Brotli. Le code minifié se compresse encore plus. La plupart des serveurs gèrent ça automatiquement.

Découpage de code. Charger seulement le code nécessaire pour chaque page. Mieux qu'un énorme bundle minifié.

Tree shaking. Les bundlers retirent les exports inutilisés. Importe seulement ce dont tu as besoin.

Ces techniques se combinent. Minifie, puis compresse, puis découpe intelligemment.

Source maps

Le code minifié est illisible. a.b(c,d) ne te dit rien pendant le débogage.

Les source maps connectent le code minifié au code source original. Les outils de dev de ton navigateur affichent du code lisible tout en exécutant du code minifié.

Garde les source maps en développement. Décide si tu les déploies en production selon que tu veux que les utilisateurs voient ton code source.

Problèmes courants

Noms de variables cassés. Les minificateurs mutilent parfois des noms qui doivent rester intacts (comme les clés API dans les chaînes). Configure des exclusions.

CSS dépendant de l'ordre. Une minification CSS agressive pourrait réordonner les règles et changer comment les styles cascadent.

Problèmes async. La suppression agressive de code mort pourrait casser du code qui se charge dynamiquement.

Teste les builds minifiés avant de déployer. Ce qui fonctionne non minifié peut casser après traitement.

---

La minification est de la performance bon marché. Les outils de build la gèrent automatiquement. Configure-la une fois, profite de fichiers plus petits pour toujours.