Combinez et minifiez vos fichiers javascript avec PHP


Ces derniers jours, j’ai désactivé le plugin W3 Total Cache pour WordPress car j’ai l’impression qu’il consomme énormément de CPU. Je l’ai remplacé par le classique WP Super Cache.

Seul problème, Total Cache gérait tout (le cache mais aussi la minification des scripts et la compression GZIP), ce que ne fait pas Super Cache.
Du coup, je me retrouve à devoir remettre en place mes solutions custom que j’avais expérimenté pour les CSS et amélioré.

Cette fois-ci, j’ai cherché à m’appuyer sur des librairies existantes, plutôt que faire ma propre sauce, avec les possibilités d’erreurs. Ainsi, je pourrais bénéficier des améliorations et corrections de ces librairies.

J’ai découvers jsmin-php, qui fait grosso modo ce que je souhaite faire, c’est à dire combiner et minifier les fichiers JS.

Bon, trève de discours, place au code :

Le code

Le code pour à la fois combiner et minifier les scripts est relativement simple :

require_once('jsmin-x.y.z.php');// x.y.z est la version courante, actuellement 1.1.1.

$javascripts= glob("/chemin/vers/les/js/*.js");
//vous pouvez remplacer ce qui précède par un tableau des fichiers JS
$js = "";
foreach($javascripts as $javascript) {
    $js .= JSMin::minify(file_get_contents($javascript));
}

file_put_contents("/chemin/vers/les/js/unique.js", $js);

Je pense que le code est suffisamment simple pour ne pas l’expliquer.

Il ne reste plus qu’a appeler le fichier unique.js dans vos pages.

Le petit plus

En environnement de production, il vaut mieux ne pas avoir à utiliser cette routine lors de chaque appel. L’effet sur le CPU serait néfaste. Pourtant, il faut détecter les mises à jour des scripts ou les ajouts ou suppressions éventuels.

L’idée qui me vient consiste à utiliser le cache objet de WordPress pour stocker le résultat de l’opération et faire expirer cet objet régulièrement ou à la demande.

Le code suivant pourrait écrire dans le cache le chemin vers le script combiné.

$mycache = wp_cache_get( 'myjavascript' ); // fetch data from cache to the key "myjavascript"
if ($mycache == false) { // if no data, then
	$mycache = get_unique_javascript(); // call to jsmin.php code
	wp_cache_set( 'myjavascript', $mycache ); // save content to key "mycache"
}

wp_register_script($mycache); on ajoute le script programmatiquement dans le header.

Le code est incomplet mais c’est un début de réflexion pendant que j’écris ce billet. Si j’ai le temps j’essaierais d’en faire un petit plugin simple (pas une usine à gaz comme certains plugins) et quelques tests.

Qu’en pensez vous ?