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错误。 上面两图分别是两种缓存状态。

结合以上表格可以看出，不管是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文件已经被重新加载了最新版本的，此时再刷新一下浏览器，便会和上面的上面那张图一样的状态。

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

angelCopy JavaScript