6.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 :

• de façon manuelle à l'aide d'outils en ligne
• de façon manuelle dans une fenêtre Terminal
• de façon automatisée à 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.

Outils en ligne

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

Certains peuvent être appelés par programmation alors que d'autres doivent être utilisés manuellement.

En voici quelques-uns :

•  http://www.shrinker.ch/ : fait la minification et la combinaison JS ou CSS. En ligne seulement. Note : la minification JavaScript posait problème lors de mes derniers tests mais tout se passait bien avec le CSS.
• https://www.minifier.org/ : fait la minification JS ou CSS. Peut également faire la combinaison dans la version appelée par programmation.
• https://jscompress.com/ : fait la minification et la combinaison JS. En ligne seulement.
• https://javascript-minifier.com/ : fait la minification JS. Peut être appelé par programmation.
• https://cssminifier.com/ : fait la minification CSS. Peut être appelé par programmation.

Terminal

Ici aussi, on retrouve plusieurs outils, par exemple :

• Laravel Mix qui est installé par défaut avec Laravel. Notez qu'il est possible d'automatiser le travail dès qu'un fichier à minifier est modifié.
• Terser (branche de UglifyJS qui supporte ES6)
• YUI Compressor
• Closure Compiler
• CSSO

Outils automatisés

Si vous optez pour l'automatisation, vous aurez plus de travail à réaliser pour installer et configurer les outils requis. Par contre, l'opération de combinaison et de minification sera par la suite très facile à réaliser.

Je vous propose quelques procédures pour configurer différents outils dans PhpStorm.

Combinaison et minification du JavaScript à la ligne de commande de PhpStorm avec Terser

Terser est une branche de UglifyJS qui supporte la version ES6 de JavaScript, aussi appelée ECMAScript 2015 ou JavaScript 6.

Terser peut combiner et minifier vos fichiers JavaScript directement dans PhpStorm :

• Téléchargez et installez Node.js sur votre poste de travail à partir de ce site : https://nodejs.org/en/#download.

  Sous Mac, ceci ajoutera le dossier /usr/local/lib/node_modules.

  Sous Windows, le chemin sera plutôt C:\Users\MonNom\AppData\Roaming\npm\node_modules.

• Ouvrez la fenêtre de Terminal de PhpStorm : View / Tool Windows / Terminal.
• Dans la fenêtre de Terminal de PhpStorm, lancez la commande suivante (notez le -g qui indique que Terser pourra être utilisé en ligne de commande) :
  Terminal

  sudo npm install terser -g

  Ceci installera Terser dans le dossier node_modules créé plus tôt. Si vous omettez l'option -g, Terser sera installé dans un dossier node_modules placé sous le dossier courant.
• Toujours dans la fenêtre de Terminal de PhpStorm, assurez-vous d'être placé à la racine de votre projet en entrant la commande :
  Terminal

  pwd

  Au besoin, changez le dossier à l'aide de la commande cd.
• Placez-vous dans le dossier qui contient votre code JavaScript.

  Par exemple, dans un projet PHP vanille :

  Terminal

  cd js

  Dans une extension WordPress (changez les / pour des \ sous Windows) :

  Terminal

  cd wp-content/plugins/monextension/js

• Lancez la commande suivante pour combiner et minifier vos fichiers JavaScript. Remplacez app par le nom à donner au fichier minifié.
  Terminal

  terser fichier1.js fichier2.js fichier3.js --compress --mangle --output app.min.js

Minification automatique lors du changement du code JavaScript

Il est possible de configurer l'extension File Watchers dans PhpStorm afin de lancer automatiquement une action dès qu'un fichier est modifié. Ici, je vous montre comment minifier automatiquement un fichier JavaScript.

• Si ce n'est pas déjà fait, téléchargez et installez Node.js sur votre poste de travail à partir de ce site : https://nodejs.org/en/#download.
• Assurez-vous que l'extension File Watchers est activée dans PhpStorm.
  • Rendez-vous dans le menu Files / Default Settings (Windows) ou PhpStorm / Preferences (Mac) puis Plugins.
  • Dans la zone de recherche, entrez File Watchers.
  • Vous saurez que l'extension est activée si elle apparait dans l'onglet Installed.

    

• Ouvrez la fenêtre de Terminal de PhpStorm : View / Tool Windows / Terminal.
• Si ce n'est pas déjà fait, installez Terser à l'aide de npm.
• Terminal

  sudo npm install terser -g

• Rendez-vous dans le menu Files / Default Settings (Windows) ou PhpStorm / Preferences (Mac) puis Tools / File Watchers.
• Cliquez sur le + au bas de la fenêtre puis choisissez Uglify JS puisqu'il s'agit de la branche mère de Terser.

  

• Dans la fenêtre qui apparaît, entrez Terser dans la zone Name.
• Vous devez spécifier l'emplacement du fichier exécutable de Terser. Sous Mac : /usr/local/lib/node_modules/terser/bin/terser. Sous Windows : C:\Users\MonNom\AppData\Roaming\npm\terser.
  

  

• À partir de ce moment, dès que vous modifiez un fichier .js, il sera compressé avec l'extension .min.js.

Si vous souhaitez arrêter la minification automatique, rendez-vous dans le menu Files / Default Settings (Windows) ou PhpStorm / Preferences (Mac) puis Tools / File Watchers puis enlevez le crochet devant Terser.

Combinaison et minification des feuilles de style à la ligne de commande de PhpStorm avec CSSO

CSSO fait un travail semblable à Terser mais pour les fichiers CSS. Malheureusement, il n'offre pas la possibilité de combiner plusieurs fichiers. Il ne fait que la minification d'un seul fichier.

Pour l'utiliser, reprenez les étapes pour Terser mais cette fois, installez CSSO :

Placez-vous dans le dossier qui contient les feuilles de style à combiner et minifier puis lancez la commande :

Minification automatique lors du changement de la feuille de style

Les File Watchers de PhpStorm travaillent bien avec CSSO.

Reprenez les étapes pour Terser mais cette fois, après avoir cliqué sur le + pour ajouter un File Watcher, choisissez CSSO CSS Optimizer.

Toutes les valeurs entrées par défaut sont correctes. Il ne vous reste plus qu'à modifier vos feuilles de style, chacune sera automatiquement minifiée à chaque modification que vous y apportez.

Pour plus d'information

« The complete best practices for minifying CSS ». LogRocket. https://blog.logrocket.com/complete-best-practices-minifying-css/

« terser/terser ». GitHub. https://github.com/terser/terser

« Minifying JavaScript ». JetBrains. https://www.jetbrains.com/help/phpstorm/minifying-javascript.html

« Minifying CSS ». JetBrains. https://www.jetbrains.com/help/phpstorm/compressing-css.html

« Minify CSS with PhpStorm automatically ». speich.net. https://www.speich.net/articles/en/2019/12/30/automatically-minify-css-with-phpstorm/