WEB-d Développement Web

PHP, SQL, HTML5, CSS3, Javascript, Mootools, Référencement, SEO, CMS, e-commerce, Apache, Linux, Ubuntu, ...

Ajouter automatiquement un numéro de version aux fichiers Javascript et CSS

Les sites web utilisent généralement un header "Expire" avec une date loin dans le futur, pour indiquer aux navigateurs qu'ils peuvent mettre en cache les fichiers statiques (javascript, CSS, images etc.) et ainsi accélérer l'affichage du site.

Un problème peut survenir lorsque le fichier est mis à jour : les navigateurs qui ont déjà visité le site vont continuer à utiliser l'ancienne version du fichier, et le visiteur ne verra donc pas les modifications correctement.

Certains sites conseillent d'ajouter un paramètre à la fin de la requête : mon_fichier.css?version=1234. Ce n'est malheureusement pas une bonne solution car le fichier risque de ne pas du tout être mis en cache.

La solution la plus fréquemment utilisée consiste donc à ajouter un numéro de version dans le nom de fichier : mon_fichier.1234.css par exemple. Pour que le système fonctionne automatiquement, on peut utiliser le moment de modification du fichier (mtime), comme la fonction suivante :


function auto_version($file)
{
    $root = "chemin/vers/racine/du/site";
    if(strpos($file, '/') !== 0 || !file_exists($root . $file)) {
        return $file;
    }
 
    $mtime = filemtime($root . $file);
    return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}
 

Il suffit ensuite de remplacer les liens vers les fichiers Javascript et CSS comme suit :


<link rel="stylesheet" href="<?php echo auto_version("/css/mon_fichier.css") ?>" type="text/css" />
<script type="text/javascript" src="<?php echo auto_version("/css/mon_fichier.css") ?>"></script>
 

A l'inverse, lorsque le navigateur demande le fichier mon_fichier.1234.css, le serveur doit lui envoyer le fichier réel. C'est possible en utilisant le module Apache mod_rewrite :


RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^(.*)\.[\d]+\.(css|js)$ $1.$2 [L]

La deuxième ligne du code ci-dessus permet de vérifier si le fichier demandé existe, et si ce n'est pas le cas, la 3ème ligne supprime le numéro de version de la requête.

Articles similaires