web-dev-qa-db-fra.com

mettre en cache des fichiers JavaScript

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

javascripthttpcaching
50
Vasil

Jetez un coup d'œil à Yahoo! conseils: https://developer.yahoo.com/performance/rules.html#expires . 

Il existe également des conseils de Google: https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

23
powtac

ou dans le fichier .htaccess

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

De 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; 
}

travaille pour moi.

En tant que développeur, vous rencontrerez probablement rapidement la situation où vous ne voulez pas les fichiers mis en cache, auquel cas voir Aide en cas de problème). Mise en cache JavaScript

7
Ken

Je viens de terminer mon projet de fin de semaine cached-webpgr.js qui utilise le stockage local/Web pour stocker les fichiers JavaScript. Cette approche est très rapide. Mon petit test a montré 

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

Le code pour y parvenir 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)};

Appeler 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');
});
7
select

Dans votre fichier .htaccess 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-votre-site-with-http-caching/

5
Kalid

Je suis fortement tenté de conclure ceci comme un duplicata; cette question semble recevoir une réponse de différentes manières sur tout le site: 

2
Kent Fredric

J'ai un système simple qui est purement JavaScript. Il vérifie les modifications dans un fichier texte simple 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");

remplacez simplement le "version.txt" par votre fichier toujours exécuté et "version" par le nom que vous souhaitez utiliser pour votre stockage local.

0
joel Moses

La meilleure (et la seule) méthode consiste à définir les en-têtes HTTP appropriés, en particulier ceux-ci: "Expires", "Last-Modified" et "Cache-Control". Cela dépend du logiciel serveur que vous utilisez.

Dans Amélioration des performances… recherchez «Optimisation côté serveur» pour les considérations générales et les liens pertinents, ainsi que «Cache côté client» pour les conseils spécifiques à Apache.

Si vous êtes fan de nginx (ou nginx en clair ) comme moi, vous pouvez facilement le configurer aussi:

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

Dans l'exemple ci-dessus, tout fichier de/images/sera mis en cache sur le client pendant 4 heures.

Maintenant, lorsque vous connaissez les bons mots à rechercher (en-têtes HTTP "Expires", "Dernière modification" et "Cache-Control"), parcourez simplement la documentation du serveur Web que vous utilisez.

0
Eugene Lazutkin