Par absurdsystem le 16 novembre 2010

Mise en cache css et javascript

Par défaut, le navigateur met en cache les fichiers css et javascript afin de réduire le temps de chargement de la page par exemple.

Mais cela peut parfois poser problème si vous avez récemment modifier le fichier. Ce qui se trouve en cache ne correspond plus au véritable contenu actuel. Et il suffit d’avoir modifier la structure HTML de la page pour rendre le site illisible.

La solution ? Ajouter un peu de php.

Exemple :

<link href="css/style.css?&lt;?php echo time(); ?&gt;" rel="stylesheet" type="text/css" />

time() est une fonction qui permet de retourner l’heure courante (plus d’infos ici). Si on affiche la source de la page on obtient ceci :

<link href="css/style.css?1289905403" rel="stylesheet" type="text/css" />

Même chose pour le javascript.

De cette façon, les navigateurs ne mettront plus le fichier style.css en cache car le nom de fichier aura changer par rapport au fichier en cache.

zp8497586rq

    4 commentaires

  1. styvodiabolo dit :

    Yop ! Salut à toi absurdsystem.

    Nice, l’astuce !

    J’en émets une autre en partenariat avec la tienne : Re-générer les fichiers pour qu’ils ne soient pas dans le cache sera utile lors de la phase de développement de ces derniers mais lorsqu’ils sont en production alors il n’est peut-être plus utile qu’ils soient de nouveau « recalculés ».

    De ce fait, en production on pourrait fusionner tous les scripts en 1 et le placer sur le serveur en cache.

    Si une modification apparaît alors par l’url ou par un panel d’admin on demanderait de reconstruire le cache serveur.

    Néanmoins, thanks !

    Styvodiabolo.

  2. Nardo26 dit :

    Bonjour,
    Ton astuce ne marche pas car time() change sans arrêt… donc le css sera rechargé systématiquement…

    il faudrait plutôt faire ceci:

    <link href="css/style.css? » rel= »stylesheet » type= »text/css » />

    Dans ce cas, ke css ne sera rechargé que si la date de modif du fichier change…

  3. Nardo26 dit :

    Bizarrz, mon message au dessus a été tronqué…
    une partie du code a été sabré !

    en résumé : utilise la fonction filemtime à la place de time…

  4. absurdsystem dit :

    Le but est justement que le fichier soit recharger, et donc le fichier css, afin d’être sur que les modifications apportées soient visibles.