mise en cache des fichiers JavaScript

Question

Quelle est la meilleure méthode pour que le navigateur utilise les versions mises en cache des fichiers js (à partir du serveur)?

Answer 1

Jetez un oeil à Yahoo! conseils: http://developer.yahoo.com/performance/rules.html#expires.

Il y a aussi des conseils par Google: https://developers.google.com/speed/docs/best-practices/caching

Answer 2

Depuis PHP:

function OutputJs($Content) 
{ 
    ob_start(); 
    echo $Content; 
    $expires = DAY_IN_S; // 60 * 60 * 24 ... defined elsewhere 
    header("Content-type: x-javascript"); 
    header('Content-Length: ' . ob_get_length()); 
    header('Cache-Control: max-age='.$expires.', must-revalidate'); 
    header('Pragma: public'); 
    header('Expires: '. gmdate('D, d M Y H:i:s', time()+$expires).'GMT'); 
    ob_end_flush(); 
    return; 
} 

fonctionne pour moi.

En tant que développeur, vous aurez probablement courir rapidement dans la situation que vous ne pas voulez que les fichiers mis en cache, auquel cas voir Help with aggressive JavaScript caching

Answer 3

ou dans le fichier .htaccess

AddOutputFilter DEFLATE css js 
ExpiresActive On 
ExpiresByType application/x-javascript A2592000 

Answer 4

I je suis fortement tenté de fermer cela en tant que doublon; cette question semble répondre de différentes façons sur tout le site:

• will a script in html's script tag with extension php be cached?
• When does browser automatically clear cache of external JavaScript file?
• Help with aggressive JavaScript caching
• How to control web page caching, across all browsers?
• How can I make the browser see CSS and Javascript changes?

Answer 5

Dans votre fichier .htaccess d'Apache :

#Create filter to match files you want to cache 
<Files *.js> 
Header add "Cache-Control" "max-age=604800" 
</Files> 

J'ai écrit à ce sujet ici aussi:

http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

Answer 6

Le meilleur (et uniquement) la méthode consiste à définir les en-têtes HTTP correctes, en particulier celles-ci: "Expire", "Last-Modified" et "Cache-Control" . Comment le faire dépend du logiciel serveur que vous utilisez.

Dans Improving performance…, recherchez "Optimisation côté serveur" pour des considérations générales et des liens pertinents et pour "Cache côté client" pour le conseil spécifique à Apache.

Si vous êtes un fan de nginx (ou nginx in plain English) comme je suis, vous pouvez facilement configurer aussi:

location /images { 
    ... 
    expires 4h; 
} 

Dans l'exemple ci-dessus tout fichier à partir de/images/seront mises en cache sur le client pour 4 heures. Maintenant que vous connaissez les mots justes à rechercher (en-têtes HTTP "Expires", "Last-Modified" et "Cache-Control"), parcourez simplement la documentation du serveur Web que vous utilisez.

Answer 7

Je viens de terminer mon projet de week-end cached-webpgr.js qui utilise le stockage localStorage/Web pour mettre en cache les fichiers JavaScript. Cette approche est très rapide.Mon petit test a montré

• jQuery Chargement de CDN: Chrome 268ms, FireFox: 200ms
• jQuery Chargement de localStorage: Chrome 47ms, FireFox 14ms

Le code pour réaliser cela est minuscule, vous pouvez le vérifier sur mon projet Github https://github.com/webpgr/cached-webpgr.js

Voici un exemple complet comment l'utiliser.

La bibliothèque complète:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)}; 

L'appel de la bibliothèque

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){ 
    requireScript('examplejs', '0.0.3', 'example.js'); 
}); 

Answer 8

J'ai un système simple qui est pur JavaScript. Il vérifie les modifications dans un simple fichier texte qui n'est jamais mis en cache. Lorsque vous téléchargez une nouvelle version, ce fichier est modifié. Il suffit de mettre le JS suivant en haut de la page.

 (function(url, storageName) { 
 
      var fromStorage = localStorage.getItem(storageName); 
 
      var fullUrl = url + "?rand=" + (Math.floor(Math.random() * 100000000)); 
 
      getUrl(function(fromUrl) { 
 
//     first load 
 
       if (!fromStorage) { 
 
        localStorage.setItem(storageName, fromUrl); 
 
        return; 
 
       } 
 
//     old file 
 
       if (fromStorage === fromUrl) { 
 
        return; 
 
       } 
 
       // files updated 
 
       localStorage.setItem(storageName, fromUrl); 
 
       location.reload(true); 
 
      }); 
 
      function getUrl(fn) { 
 
       var xmlhttp = new XMLHttpRequest(); 
 
       xmlhttp.open("GET", fullUrl, true); 
 
       xmlhttp.send(); 
 
       xmlhttp.onreadystatechange = function() { 
 
        if (xmlhttp.readyState === XMLHttpRequest.DONE) { 
 
         if (xmlhttp.status === 200 || xmlhttp.status === 2) { 
 
          fn(xmlhttp.responseText); 
 
         } 
 
         else if (xmlhttp.status === 400) { 
 
          throw 'unable to load file for cache check ' + url; 
 
         } 
 
         else { 
 
          throw 'unable to load file for cache check ' + url; 
 
         } 
 
        } 
 
       }; 
 
      } 
 
      ; 
 
     })("version.txt", "version");

suffit de remplacer le « version.txt » avec votre fichier qui est toujours exécuté et « version » avec le nom que vous souhaitez utiliser pour votre stockage local.