Angularjs, код углового материала загружается каждый раз [dубликат]

Я сильно соблазн закрыть это как дубликат; на этот вопрос ответит по-разному по всему сайту:

Лучший (и единственный) метод - установить правильные заголовки HTTP, в частности, следующие: «Истекает», «Последнее изменение» и «Кэш-контроль». Как это сделать, зависит от используемого вами серверного программного обеспечения.

В улучшении производительности и hellip; найдите «Оптимизацию на стороне сервера» для общих соображений и соответствующих ссылок и для «кеша на стороне клиента» для конкретных советов Apache.

Если вы поклонник Улучшение производительности и hellip; (или nginx на простом английском языке), как и я, вы также можете легко настроить его:

В приведенном выше примере любой файл из / images / будет кэшироваться на клиенте в течение 4 часов.

Теперь, когда вы знаете правильные слова для поиска (заголовки HTTP «Expires», «Last-Modified» и «Cache-Control»), просто просмотрите документацию используемого веб-сервера.

У меня простая система, которая является чистым JavaScript. Он проверяет изменения в простом текстовом файле, который никогда не кэшируется. Когда вы загружаете новую версию, этот файл изменяется. Просто поставьте следующий JS в верхней части страницы.

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

просто замените файл «version.txt» на ваш файл, который всегда запускается, и «версия» с имя, которое вы хотите использовать для локального хранилища.

В вашем файле Apache .htaccess:

Я также написал об этом здесь:

http://betterexplained.com/articles/how-to-optimize- ваш сайт-с-HTTP-кэширование /

Я только что закончил проект cached-webpgr.js в выходные, который использует хранилище localStorage / web для кэширования файлов JavaScript. Этот подход очень быстрый. Мой небольшой тест показал

Код для этого крошечный, вы можете проверить это в моем проекте Github https://github.com/webpgr/cached-webpgr.js

Вот полный пример того, как его использовать.

Полная библиотека: [ ! d12] 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)};

Вызов библиотеки

или в файле .htaccess