cache de arquivos JavaScript

Qual é o melhor método para fazer o navegador usar versões em cache de arquivos js (do lado do servidor)?

ou no arquivo .htaccess

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

Do 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 MYH:i:s', time()+$expires).'GMT'); ob_end_flush(); return; } 

funciona para mim.

Como desenvolvedor, você provavelmente se deparará rapidamente com a situação que não deseja que os arquivos sejam armazenados em cache. Nesse caso, consulte a Ajuda com o armazenamento em cache agressivo do JavaScript

Acabei de terminar meu projeto de fim de semana em cache-webpgr.js, que usa o armazenamento localStorage / web para armazenar em cache os arquivos JavaScript. Essa abordagem é muito rápida. Meu pequeno teste mostrou

  • Carregando jQuery do CDN: Chrome 268ms , FireFox: 200ms
  • Carregando jQuery do localStorage: Chrome 47ms , FireFox 14ms

O código para conseguir isso é minúsculo, você pode conferir no meu projeto do Github https://github.com/webpgr/cached-webpgr.js

Aqui está um exemplo completo de como usá-lo.

A biblioteca completa:

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

Chamando a biblioteca

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

Em seu arquivo .htaccess do Apache:

 #Create filter to match files you want to cache  Header add "Cache-Control" "max-age=604800"  

Eu escrevi sobre isso aqui também:

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

Estou fortemente tentado a fechar isso como uma duplicata; esta questão parece ser respondida de muitas maneiras diferentes em todo o site:

  • um script na tag de script do html com a extensão php será armazenada em cache?
  • Quando o navegador limpa automaticamente o cache do arquivo JavaScript externo?
  • Ajuda com cache JavaScript agressivo
  • Como controlar o cache de páginas da web em todos os navegadores?
  • Como posso fazer o navegador ver as mudanças de CSS e Javascript?

O melhor (e único) método é definir headers HTTP corretos, especificamente os seguintes: “Expires”, “Last-Modified” e “Cache-Control”. Como fazer isso depende do software do servidor que você usa.

Em Melhorar o desempenho… procure por “Otimização no lado do servidor” para considerações gerais e links relevantes e para “Cache do lado do cliente” para obter orientações específicas do Apache.

Se você é fã de nginx (ou nginx em inglês ) como eu sou, você pode facilmente configurá-lo também:

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

No exemplo acima, qualquer arquivo de / images / será armazenado em cache no cliente por 4 horas.

Agora, quando você souber as palavras corretas para procurar (headers HTTP “Expires”, “Last-Modified” e “Cache-Control”), apenas leia atentamente a documentação do servidor web que você usa.

Eu tenho um sistema simples que é puro JavaScript. Ele verifica as alterações em um arquivo de texto simples que nunca é armazenado em cache. Quando você carrega uma nova versão, esse arquivo é alterado. Basta colocar o seguinte JS no topo da página.

  (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");