Почему не сбрасывается кеширование даже при смене имен файлов?

Question

[wlms]

Есть фронтенд на Vuejs

Сценарий по которому можно выявить проблему:
1. Юзер открыл сайт в бразуере — Mozilla, Chrome и т.п.
2. Файлы css/jss закешировались
3. Юзер закрыл в браузере вкладку с сайтом
4. Команда раработчиков делает деплой приложения на сервер. Соотвественно, в процессе билда, имена jss/css файлов были изменены, например: app.hvgu4n.js -> app.pa3mbpz.js

Как я понимаю, при следующем заходе на сайт при смене имен файлов, браузер должен скачать обновленные js/css файлы. Но этого не происходит, пока не обновишь страницу через F5 или Ctrl + Shift + R и т.п.

5. Юзер заходит на сайт с того же браузера, и пользуется старыми css/js файлами, а не свежими. Скачание новых файлов не произошло, хоть и имена файлов были изменены.

Подскажите в чем может быть проблема?
Может ли быть причина, например, в сервере Nginx, на котором лежат файлы приложения vue?

Comments

[Михаил]

сервак может кэшировать сам html, и тогда клиент запросит его, сервак скажет "без изменений" и браузер будет использовать прежний

[wlms]

Вполне возможно, что так и происходит.
Как поступать в этом случае? Кешировать файлы, но не кешировать index.html ?

Answer 1

[ky0]

Если ваша страница, на которой находятся ресурсы, закешировалась - откуда браузеру будет знать, что пора грузить новые версии файлов?

Comments

[wlms]

Вполне возможно, что так и происходит.
Как поступать в этом случае? Кешировать файлы, но не кешировать html ?

[ky0]

wlms, да, сами страницы не кэшировать.

Answer 2

[Just Me]

Запрети кеширование текущей HTML страницы прописав в ней:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

и проверь действительно ли app.css имеет разные имена при разных сборках на странице

сборка точно разная? сбрось кеширование для vue:

vue.config.js

chainWebpack: config => {				
	    if (process.env.NODE_ENV === 'production') {				
	      config.module.rule('vue').uses.delete('cache-loader');				
	      config.module.rule('js').uses.delete('cache-loader');				
	      config.module.rule('ts').uses.delete('cache-loader');				
	      config.module.rule('tsx').uses.delete('cache-loader');				
	    }				
	  }

Comments

[wlms]

Благодарю за ответ. Я склоняюсь к использованию решения от Михаил и ky0

Answer 3

[Lord_Dantes]

Если идет речь про CSS файлы, нужно добавить новую версию файла. Например: style.css?v=1.0001
И при следующих изменениях добавлять 1.0002 и т.д

Comments

[wlms]

Чем Ваш способ отличается от изменения имени?

app.1gh7ah.css -> app.jg84nf.css, например?

Доблавение ?v=1.0001 — это есть изменени имени файла, что говорит браузеру о том, что файл именился, и его следует скачать

Я что-то путпаю?

[Lord_Dantes]

wlms, да, но есть смысл изменять имя файла и изменить в коде версионость файла?

[Михаил]

s l a v e, ?v=* давний фикс для кэша
сейчас добавляют hash контента файла в название, так что фикс с query уже не требуется, путь к файлу и так будет обновляться