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 !

Comment minifier son code avec Parcel

Il existes des dizaines (voir des centaines) d'outils pour minifer le code, mais celui que je vais vous présenter aujourd'hui est un outil moderne qui vous permettra de faire bien d'autres choses.

Parcel n'est pas seulement un minifier, c'est avant tout un "bundler d'application", ce qui signifie qu'il va vous permettre d'importer vos fichiers CSS et Javascript comme des modules.

Si vous connaissez Webpack, Parcel est une alternative plus récente.

Pour installer Parcel globalement, exécutez la commande suivante :

npm install -g parcel-bundler

Ensuite, prenons l'architecture d'un projet basique comme suit :

index.html
- src/
-- main.js
-- class1.js
-- class2.js
-- css/
--- main.css
--- theme.css
--- button.css
En tenant compte que chaque dépendance Javascript est incluse avec la directive "import" et que chaque dépendance CSS est incluse avec "@import" dans leur fichier 'main' respectifs.

Et étant donné le fichier html suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <link rel='stylesheet' type='text/css' href='main.css'>
  </head>
  <body>
    <script src='main.js'>
  </body>
</html>

La seule chose qu'il vous restera à faire, sera de lancer Parcel en mode "production" afin qu'il package votre application et qu'il minifie vos fichiers par la même occasion, avec la commande suivante :

parcel build index.html

Et voilà, votre projet est minifié et ne contiendra que trois fichiers : index.html, main.*.js et main.*.css !

À noter que le dossier contiendra aussi des fichiers *.map mais qui ne sont pas envoyés par le serveur, ils servent lors du debuggage des fichiers minifiés.

Pour plus d'informations, je vous laisse consulter la documentation officielle de Parcel :

Parcel
Blazing fast, zero configuration web application bundler

Si vous voulez minifier votre code sans passer par un bundler d'application comme Parcel ou Webpack, vous pouvez regarder du côté de Gulp qui propose des plugins de minification !

J'espère que cet article vous aura plu, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage de d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo par Markus Spiske sur Unsplash