如何解决前端页面缓存问题
众所周知,前端浏览器与服务器之前存在着“强制缓存”和“协商缓存”(对此不了解的可以查看其他博主的博文),如果不加以处理的话,每次部署后,js、css、图片甚至是html都会有缓存问题,部署后,发现已经更改的js、css、图片并没有更新,可能会随着服务器设置的协商缓存,经过半小时或几个小时会清掉缓存,遇到这些情况,可能会让一个前端略微有些尴尬。
还好现在的前端开发都是通过webpack等构建工具,通过设置,可以对js、css等文件进行hash版本管理,但是构建工具并没有处理html文件,特别是微信环境对前端html的缓存异常严重。
说说我遇到的问题,我们是通过vue-cli4 构建的多页面应用,外层的服务采用的是前端打包后的静态文件+nginx的形式,我们的页面访问的地址类似成这样,
https://xxx.xxx.com/my-app/index.html#/home?a=123
一个页面到另外一个页面后面的参数会是不同的,我原本认为会避免掉html缓存。但是一次发布的时候,发现浏览器并没有访问新页面,打开f12的开发者模式,一看index.html文件竟然是304缓存文件,我才反应过来,#后面的参数是会被忽略的。为了让业务和测试伙伴尽快投入测试,我提供给他们一个临时解决地址 https://xxx.xxx.com/my-app/index.html?v=1#/home?a=123,在html上加上了v=1 算是请求一个新的html,临时解决了一下。
为了根本解决,还是从我们的nginx服务上解决,解决方案如下:
location / {
if ($request_filename ~* .*\.(?:htm|html)$) ## 配置页面不缓存html和htm结尾的文件
{
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
root /web/;
index index.html;
try_files $uri $uri/ /index.html =404;
}
再查看我们的页面,html返回的都是200,不再有缓存,完美解决。