Minifiez votre code ! … C’est quoi la minification ?

Minifier votre code

J’ai donné quelques conseils sur la façon d’augmenter la lisibilité d’un code source. Avoir un code source lisible permet de le rendre plus facilement maintenable et… lisible. Mais ici, ça va être tout l’inverse. Je vais vous montrer comment minifier votre code et surtout, à quoi ça peut servir !

C’est quoi la minification ?

La minification d’un code source est un traitement qui va le rendre le plus petit possible. Je parle de petit dans le sens de la taille du fichier qui contient le code. Ce qui est réduit au minimum en fait c’est le poids que fait le code source.

La minification peut aussi porter le nom de compression du code source, mais c’est une compression qui ne change pas le format du fichier. Du code CSS restera du code CSS même « compressé » et ne deviendra pas un fichier GZIP par exemple.

Minifier un code source va donc le rendre moins lourd. La minification va supprimer tout ce qui n’est pas nécessaire pour que le code fonctionne. En gros, espaces, commentaires, saut de ligne… tout y passe et on se retrouve avec un code bien épais et bien compact ! Le nom des variables et des fonctions va quant à eux être renommé pour qu’ils ne prennent que quelques lettres. Le processus de minification a pour but de gagner un maximum de place possible !

Bien entendu, minifier un code source va le rendre un tout petit peu plus difficile à lire :).

Comparaison entre deux fichiers, devinez lequel des deux est minifié !

Pourquoi minifier votre code ?

Quel intérêt de réduire son code de cette manière si on peut plus le lire ? Et bien, c’est utile surtout pour les programmes écrits en langages WEB qui sont envoyés vers les navigateurs internet. HTML, JavaScript, CSS… Tous ces fichiers sont téléchargés par les visiteurs d’un site web. Le plus léger ces fichiers sont, le plus vite votre site se chargera.

Minifier son code peut aussi être un moyen simple d’obfusquer son code vu qu’il le rend beaucoup moins lisible. L’obfuscation est un moyen de protéger son code source en le rendant illisible. Mais cela reste peu efficace vu que des outils pour le processus inverse existent.

Un code minifié s’identifie généralement avec un « .min » entre l’extension et le nom du fichier. Le code normal est utilisé pour le développement et le code minifié pour la production. Des frameworks front-end comme BootStrap ou JQuery proposent toujours les deux formats.

Comparaison de poids entre deux fichiers

Ce sont les deux fichiers de JQuery qui sont proposés en téléchargement sur leur site officiel. C’est exactement le même outil avec les mêmes fonctionnalités. Pourtant, on a quand même une réduction d’environ 70 % du poids ! Vos visiteurs vont donc charger le framework 3 fois plus vite qu’avec la version non minifié !

Minifier son code n’est utile que pour les sites qui sont en production. Pour le développement, c’est inutile, contre-productif et surtout très compliqué de travailler sur un code minifié.

Néanmoins, si vous devez pour une quelconque raison, travailler sur un code minifié, il existe des outils qui vont faire l’étape inverse. Cela ne remettra pas les commentaires, mais l’indentation et les espaces seront restaurés ce qui rendra le code plus lisible. Ces outils sont ce qu’on appelle des beautifier.

Comment minifier votre code ?

On ne minifie pas son code à la main, car c’est… un peu compliqué. Il est plus facile et surtout plus rapide d’utiliser des outils qui vont analyser votre code et s’occuper de le compacter le plus possible. Le processus de minification n’altère en rien le fonctionnement de votre programme donc vous pouvez utiliser un outil sans crainte.

Certains EDI comme NetBeans ou des éditeurs de texte comme SublimeText ont des outils pour minifier du code. Mais il existe aussi des outils en ligne pour la minification. Pour cela, il suffit de copier votre code et de le coller vers l’outil. Un clic et votre code est minifié ! Une fois la minification faite, il suffit de créer un fichier portant le même nom tout en rajoutant le « .min » et de copier-coller le résultat du traitement.

Voici un lien vers le minifieur que j’utilise le plus souvent.

Et voilà, une petite astuce qui va augmenter la vitesse de votre site web !

 

Partager l’article :
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.