Formation PUB010 : PHP, 2025 Combinaison et minification

38.1 Combiner et minifier les fichiers JavaScript et CSS


Lorsqu'un site Web est en production, il est important de diminuer le plus possible le nombre de requêtes HTTP, donc le nombre de fichiers que le site Web utilise, ainsi que la taille de ceux-ci.

Une des technique pour y arriver est de combiner (en anglais : bundle) tous les fichiers .js en un seul. Le même travail sera accompli pour les fichiers .css.

En plus de cette combinaison, on pourra les minifier, c'est-à-dire les passer dans un algorithme qui supprime les commentaires, réorganise le code et retire les caractères non essentiels comme les sauts de ligne. Cette opération ne modifie en rien les fonctionnalités du code.

Il est possible de combiner et minifier les fichiers de différentes façons :

  • à l'aide d'outils en ligne
  • à l'aide de commandes dans une fenêtre Terminal
  • à l'aide d'outils intégrés à un IDE

Dans tous les cas, il est d'usage d'ajouter .min avant l'extension du fichier pour indiquer que son code est minifié. Par exemple, le fichier styles.css deviendra styles.min.css.

IMPORTANT : quand vous combinez des fichiers CSS, vous devez les charger dans l'outil de combinaison dans le même ordre qu'ils étaient chargés dans votre page Web.

Outils en ligne

Il existe des tonnes d'outils en ligne qui permettent de combiner et de minifier le JavaScript ou le CSS.

En voici quelques-uns :

Autres techniques

Une fois le site Web en production, la combinaison et la minification doit être refaite à chaque changement apporté aux feuilles de style ou aux scripts.

L'utilisation d'outils en ligne rend cette tâche fastidieuse lorqu'elle doit être réalisée à répétition.

Heureusement, il existe des techniques pour faciliter cette tâche. Si ça vous intéresse, les détails sont ici : « Pour faciliter la combinaison et la minification (Vous ne possédez pas les droits pour accéder à cette fiche.) ».

 

▼Publicité

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Merci de partager !
Soumettre