Pourquoi et comment minifier son code ?

La minification de code consiste à prendre un fichier X et à réduire sa taille au maximum tout en conservant l'intégralité des informations contenus dans ce dernier.

La minification peut rendre un fichier relativement illisible pour un être humain, mais une machine doit pouvoir le lire de la même manière que le fichier d'origine.

Cette mécanique prend son sens surtout dans le monde du web où toutes les instructions envoyées au navigateur ne sont pas compilées mais interprétées, dans le cas d'un langage de plus bas niveau, c'est le compilateur qui va se charger de "minifier" le code.

Mais en quoi consiste exactement cette mécanique sur des fichiers html, css et javascript ? Voici les transformations appliquées :

• Suppression des commentaires
• Suppressions des caractères "vides" (espaces, tabulations, retour à la ligne)
• Raccourcissement des noms de variables et fonctions (pour Javascript)
• Regroupement de plusieurs fichiers en un seul (par type de fichier)

Attention, la minification n'est ni une compression (voir gzip) ni une réelle obfuscation (rendre le code le plus difficile à comprendre possible pour éviter la rétro-ingéniérie).

Les avantages

Des fichiers plus légers

Je ne sais pas si je dois vraiment vous expliquer en détails ce point parce que logiquement, lorsque l'on retire des caractères à un fichier, il s'allège, tout simplement !

Pour être plus précis, le pourcentage de taille de fichier réduit par minification va varier selon le taux de commentaires et d'espaces vides présents dans le fichier, mais on peut atteindre des taux de réductions de plus de 60%, ce qui n'est pas négligeable !

Moins de requêtes

Pour le même poids total (disons 100Ko de code), un seul fichier sera chargé beaucoup plus vite que s'il est séparé en 10 fichiers pesant chacun 10Ko, la raison réside dans l'optimisation du nombre de requêtes.

Pour chaque fichier, une requête http(s) va être envoyée au serveur, le serveur va devoir trouver le fichier, construire la réponse, l'envoyer et le navigateur va devoir télécharger la ressource.

Hormis le temps de téléchargement qui va varier selon la taille du fichier, tous les autres temps d'attente son incompressibles, ce qui signifie qu'ils sont nécessaire au bon fonctionnement du système.

Rassembler ces 10 fichiers en un seul va permettre de diviser par 10 ces temps d'attente obligatoires, et donc améliorer les performances de votre site.

Garder votre code lisible

Plus qu'un avantage, c'est surtout un effet secondaire. Car oui il est possible de développer entièrement sans commentaire et en rassemblant déjà son code dans le moins de fichiers possible, mais cela entraine une base de code très peu lisible, maintenable et qui risque d'entrainer de nombreuses erreurs lors de la phase de développement.

Avec la minification au moment du build de votre site, vous allez pouvoir continuer à séparer votre CSS et votre Javascript dans autant de fichiers nécessaire pour les garder lisible, et d'ajouter des commentaires pour documenter au maximum le code, tout en conservant les performances finales de ce dernier !

Tutoriel

Si vous voulez apprendre à minifier un projet, je vous invite à lire mon tutoriel d'introduction à Parcel, un bundler d'application très simple d'utilisation qui minifiera aussi vos fichiers !