Qu’est ce que la minification ?
I. Présentation
Aujourd'hui nous allons essayer d'en apprendre un peu plus sur le terme "minification" ou "minifier". C'est un terme que l'on peut croiser lorsque l'on travail sur du développement et plus souvent le développement web.
II. Principe et intérêt
L'intérêt premier de la minification est d'alléger le poids d'une application, d'un script ou plus généralement d'une page web, cela peut s'appliquer sur un tas de langage informatique mais est souvent utilisé dans les technologies web, on parle alors de minification JavaScript, CSS ou encore HTML pour les pages statiques.
La minification consiste en fait en la suppression de tout ce qui n'est pas indispensable à la compréhension du code par les machines. Souvent lorsque l'on code, on va ajouter des commentaires, des sauts de lignes et des espaces dans un code donné ce qui le rend plus simple à relire et donc à maintenir par la suite, un code bien présenté et bien aéré est en effet plus simple à relire et à maintenir pour l'homme mais est totalement inutile pour la machine. Cependant, l'ajout de ces éléments dans un code fait que le code va prendre plus de place sur le disque et donc va alourdir le poids global de la page. Dans le monde du web, plus une page est légère, plus elle est jugée performante et donc de qualité (pour les moteurs de recherche entre autre). C'est pourquoi la minification est très utilisée dans le monde du développement web car on va tout faire pour alléger le poids de page en enlevant ce qui n'est pas indispensable pour les machines.
D'autres éléments de développement peuvent également être affectés par les techniques de minification. On peut citer par exemple les déclarations de fonction vides. Par exemple dans un code CSS :
a {}
Ce code ne sert à rien pour la construction de la page mais prend quand même de la place dans celui ci et sera donc supprimé lors du processus de minification. De la même façon, une couleur dans un CSS exprimée par "#ff0000" pourra une fois minifiée donner le même résultat avec "#ff0". Cela ne semble pas grand chose, mais sur un code de plusieurs milliers de lignes, la minification et les opérations de ce genre peuvent faire gagner plusieurs Ko sur un fichier, ce qui devient non négligeable pour un site web possédant des pages CSS, des scripts Javascript et du code HTML, tout trois pouvant être minifiés.
Comme nous l'avons vu plus tôt, la minification est faite dans le but de rendre l'échange, l'analyse et la compréhension du code plus simple et plus rapide entre les machines, les développeurs se jettant dans un code minifié n'y comprendront plus grand chose car en effet, le code minifié ressemble le plus souvent à une suite de caractères sans sauts de lignes (donc un code entier sur une seule ligne), sans espace et sans commentaire. Un code minifié peut aussi être assimilé à une technique d'obfuscation de code à un stade très basique. L'obfuscation de code étant le fait de rendre illisible un code donné par le client l'utilisant. Pour résumé, on peut dire que la minification :
- Allège votre page web
- Rend les échanges plus rapides
- Réduit la consommation réseau des clients comme des serveurs
- Peut rendre le code plus compliqué à comprendre, à lire, mais aussi à maintenir et à débugger.
Plusieurs outils existent sur le net pour minifier le code à la volé, je peut par exemple vous présenter YUI Compressor qui vous permet de minifier du code CSS et JS directement en ligne. Celui-ci permet également de renvoyer une code minifié et compressé au format gzip si on coche les bonnes options :
Pour vous donner une exemple, je prends un code CSS du thème basique de WordPress 2014 en non compressé, celui-ci fait 4184 lignes. Voici ce que donne le code minifié à gauche, et non minifié à droite :
Voici maintenant la différence de poids entre les deux fichiers :
Attention, dans les sites web, les fichiers minifiés ne viennent pas remplacer les fichiers initiaux car c'est dans ceux-ci que nous allons aller modifier le code avant de le reminifier, sinon la maintenance de code serait impossible ou très fastidieuse, on va donc la plupart du temps créer le fichier minifié au nom de "file.min.css", il faut alors penser à changer le liens vers le fichier css en question dans le code du site web, sinon les anciens fichiers css non minifiés seront toujours utilisés.
III. Minification et compression
Il ne faut pas confondre la minification et la compression. A l'inverse d'un code compressé, le code minifié est lisible et interprétable par une autre machine sans opération supplémentaire. Un fichier CSS minifié est toujours un fichier au format CSS alors qu'un fichier compressé en GZIP est un fichier au format .gzip et non plus CSS. De plus, un humain pourra toujours comprendre un code minifié même si cela est difficile, ce qui ne sera pas le cas d'un fichier au format gzip.
Merci beaucoup