nginx设置不缓存静态入口资源

问题描述

每当我们发布版本之后万恶的index.html的缓存老是需要手动清除一下，才能加载新的js文件（虽然我们使用了hash后缀打包js文件，但是html文件入口是固定的）。每次客户出现了问题，都只能在群里说下清一下缓存试试呢。这样也不是个事儿呀...

技术背景

使用nginx做代理
使用webpack等打包出一个唯一的入口文件index.html，或者其他方式的入口html文件
入口html文件中js已经使用hash后缀方式加载

实验步骤

在使用缓存策略前

如上图所示，我访问系统时第一个资源文件就是我的入口地址（为什么不是index.html?这是使用了vue-router的history模式，nginx配置返回静态文件index.html，其实都一样），大家看一下它的状态是200，其他css,js文件都是200（http常用状态码后面会补充）。当我刷新一下浏览器之后，如下

第一个websocket的咱们先不管，看第二个入口文件它的状态变成了304,而其他css,js文件是200 from memory cache，表示缓存过了。此时如果不强制清除缓存就会出现前面描述的情况一样，即使我下面的css,js文件都有hash后缀但是因为入口文件被缓存了，那么它还是会加载老的js文件，当然如果此css或js文件不存在可能会404错误。上面两图分别是两种缓存状态。

状态码	说明	个人理解	备注
200	OK	请求成功	正常请求
304	Not Modified	设置了长缓存、但ETag没有移除时触发	协商缓存
200	from memory cache	不请求网络资源，资源在本地内存当中	chrome策略，firefox都是304

结合以上表格可以看出，不管是304还是200 from memory cache都会有存在入口文件被缓存的风险。所以修改nginx配置如下：

location ~ .*\.(htm|html)?$ {#原来这样设置的不管用#expires -1;#现在改为，增加缓存add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";access_log on;
}
复制代码

在使用缓存策略后

不管刷新多少次，都是200正常状态，没有被缓存，但是检测到css,js文件还是原来的所以也不用担心他们会重新加载一遍。我们再做个线上版本发布的测试，我重新发布项目后，所有文件后缀全部变了，如下图轻轻刷新一下浏览器，会发现入口html文件状态还是正常的200，而其他js,css文件已经被重新加载了最新版本的，此时再刷新一下浏览器，便会和上面的上面那张图一样的状态。

到此，此问题解决，欢迎补充。

转载于:https://juejin.im/post/5c739f71f265da2de165a7fc

彻底解决让用户清一下浏览器缓存相关推荐

解决vue项目在ie浏览器缓存问题。
解决vue项目在ie浏览器缓存问题. 参考文章: (1)解决vue项目在ie浏览器缓存问题. (2)https://www.cnblogs.com/jiangweichao/p/11255451.ht ...
完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）
一.简介开发完发布新版本后,在有些电脑上总需要强刷才能获取到最新版本的内容,太恶心了. 浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档 ...
浏览器缓存导致的问题：
1.需要的效果如下: 2.添加样式之后,样式会生效,但是没有达到上面的效果,表单会消失掉,只剩下一个黑色的背景图 4.原因: 因为浏览器的缓存问题导致的样式没有显示出来 5.解决办法: 清除掉浏览器缓 ...
解决web项目发布新版本需要清除浏览器缓存的问题
原链接:https://www.jianshu.com/p/4ad18acb59d7 一.bug起因最近做公司的项目,对样式进行了修改后,新版本上线.测试那边经常说:修改的样式没有生效,我都是让他们 ...
浏览器缓存带来的前端项目更新问题及解决方法
先说一个前端开发中会遇到的问题,我们更新已上线的项目,用户的浏览器显示的却是旧版的页面,没有及时获取到我们更新的资源,这是什么原因造成的?此时,如果用户刷新一下页面,就得到更新后的资源,又是为什么? ...
【浏览器】浏览器缓存
一浏览器缓存机制浏览器在每次发生请求时,先在在浏览器缓存中查找该请求的结果和缓存标识,并且每次收到请求结果均会把请求结果和缓存标识保存在浏览器缓存中. 总体脑图:文中脑图及流程图资源浏览器缓存策 ...
详解浏览器缓存前端开发必会
详解浏览器缓存缓存可以说是性能优化中简单高效的一种优化方式了.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷. 对于一个数据请求来 ...
html js清除缓存,js清除浏览器缓存的几种方法
JS 缓存的问题一直都是我们又爱又恨的东西.也是我们比较头痛的问题, 一方面为了提高网站响应速度,减少服务器的负担,和节省带宽,将需要将静态资源缓存在客户端, 但是另一方面,当js 文件有改动的时候, ...
chrome浏览器缓存 from disk cache
今天遇到个问题,同样的两个前端项目,服务器也一样,但是有一个项目的接口出现status:200 (from disk cache),之前从没遇见过,在此记录一下.解决办法:只要清除浏览器缓存(更多工具 ...

彻底解决让用户清一下浏览器缓存