如何解决现代浏览器中的缓存问题?

时间:2018-11-01 12:17:51

标签: google-chrome caching vue.js service-worker

我们正在开发基于VueJS的应用程序。我们有一个巨大的缓存问题。

团队成员正在不断更新网站,但是我们正在获得有关已解决问题(例如错别字和放置错误的元素)的反馈。

我个人尝试检查这种情况,发现Chrome从磁盘缓存或内存缓存读取文件,直到刷新页面为止。即使有时chrome在我们再次进入网站时(刷新过程(ctrl + shift + r)之后)仍然加载旧页面。

对不起我的英语不好,但我尽力解释我遇到的事情。我也找到了有关该问题的主题,OP解释了我遇到的问题。您也可以检查一下。 How to clear cache of service worker?

我在IIS(本地计算机Windows 10)上创建了一个网站,发布了该项目,并尝试使用本地ip地址(127.0.0.1:8093)访问该网站,在网络标签中,我可以看到.js和.css文件进行下载,然后重新启动浏览器,然后再次尝试,这一次是从磁盘缓存中提供文件,我尝试了几次,有时是从缓存中提供文件,有时是下载。

我试图添加serviceWorker,但是我空手而归。我还创建了一个基础项目来测试一些vuejs功能,并向该项目添加了相同的serviceWorker代码。它再次缓存。

我们的服务器是带有IIS 8的Windows 2012服务器。

如果可能的话,我们需要不缓存的方法,或者我们要管理缓存的内容而不是缓存的内容。如果您可以提供帮助,我们将不胜感激。

您可以签出基础项目 vue-base project

我尝试过的事情

如上所述,我尝试在github提交时添加服务人员,

https://github.com/vuejs-templates/pwa/pull/21/files

我还尝试删除缓存的数据caches.delete(cacheName)似乎无效。

我不知道服务人员是否与这个问题有关,但没有解决我的问题。可能是我无法正确添加代码。如果您能提供帮助,我将不胜感激。 谢谢您的帮助。

编辑1:Screen GIF

1 个答案:

答案 0 :(得分:1)

我不知道您使用什么来捆绑代码和资产,但是使用webpack可以使用哈希码创建文件,这意味着每次浏览器在浏览器中找到新文件引用时,都会下载该文件

例如:您昨天部署了一个包含main.34534534534.js的代码 今天,您再次部署,但是文件是main.94565342.js。您的浏览器将自动使缓存无效。