Кэширование файла JS отличается, если включено через тег script против GET - PullRequest
Новая
       29

Кэширование файла JS отличается, если включено через тег script против GET

2 голосов
/ 27 июня 2019

Последние несколько дней я застрял в кеширующем аде, и пока я начинаю понимать, что он все еще испытывает некоторые трудности.

Желаемый результат
Я хочу включить файл JS на сайт и кэшировать его и / или получать только новую копию файла, когда файл был изменен на сервере. Я НЕ МОГУ использовать теги версии или хэши в имени файла. Имя файла должно оставаться согласованным.

Где я нахожусь
Из того, что я понимаю после прочтения этого, использование Etags является идеальным решением для этого. Они будут обновляться при изменении файла и отправлять новую версию файла, если теги не совпадают. И это, кажется, работает, когда я запрашиваю файл через браузер

Итак, вы можете видеть, что при первом запросе я получаю 200, а размер загружаемого файла равен 292 B, а при втором запросе, потому что теги совпадают, я получаю 304, а размер загружаемого файла - 137 B (я полагаю, размер заголовка). Большой! Это именно то, что я хочу.

enter image description here

Мой заголовок запроса с поиском этаг: enter image description here

Моя проблема
Теперь это работает, когда я запрашиваю файл из браузера, но добавление js-файла в тег скрипта не отправляет заголовки запроса таким же образом. Итак, открыв следующий HTML-файл 

<!DOCTYPE html>
<html>
    <body>
        <script src="https://myTestSite.com/testCache.js"> 
        </script>
    </body>
</html>

Мой js-файл выбирается каждый раз, поскольку отсутствует заголовок запроса if-none-match. Как мне воспроизвести поведение, которое наблюдалось в приведенном выше сценарии при использовании тега html script? enter image description here enter image description here

TL; DR
Как использовать Etags для запроса только измененных файлов JS при использовании тегов html-сценария, а не простого запроса GET браузера?

Ответы [ 2 ]

0 голосов
/ 28 июня 2019

Я заработал, но не совсем так, как ожидал.Вот что я в итоге сделал.

В каталог, из которого я хотел отправить свой js-файл, я добавил файл .htaccess 

<FilesMatch "\.(js|css)$">
    Header set Cache-Control "no-cache, must-revalidate"
</FilesMatch>

Я понял, что если я локально добавляю js-файлы в кеш, он всегда вытягиваетиз локального кэша и никогда даже не делайте запрос к серверу.Поэтому, даже если Etag был изменен, мой клиент никогда не узнает, потому что файл уже был локально кэширован.

Итак, я решил вообще не кэшировать файл и выполнить повторную проверку.Поэтому, хотя у меня есть небольшие издержки на заголовки http, я всегда получу последний файл без необходимости извлекать весь файл каждый раз.

0 голосов
/ 27 июня 2019

Возможно, вам следует попробовать загрузить файл с помощью MLHttpRequest : 

<!DOCTYPE html>
  <html>
    <body>
    <script> 
    (() => {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', "https://myTestSite.com/testCache.js");
      xhr.setRequestHeader('if-modified-since', '/*...*/')
      xhr.setRequestHeader('if-none-match', '/*...*/')
      //add more headers if you need
      xhr.onreadystatechange = function(){
          if(this.readyState == 4){
              if(this.status == 200){
                  //succeed
              }else{
                  //failed
              }
          }
      },
      xhr.send();
    })()
    </script>
  </body>
</html>
...