彻底解决让用户清一下浏览器缓存-优快云博客

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;
}
复制代码