前端发版时清理浏览器缓存
在前端,总有这样那样的原因导致资源被缓存,大部分情况下,我们是希望资源被缓存的,比如js,css,png等等.这样对于加速网页打开有很大的性能提升.
但是,部分情况下我们不希望前端资源被缓存,比如前后端分离的应用,发版时,如何清除掉老的html缓存就是一件让人非常头大的事情
对于这种情况,我结合自己实际的项目开发经验以及网上查看到的资料做了以下的总结:
浏览器识别缓存的原理
浏览器对于文件是如何缓存的呢,网上有很多类似的文章,我这随便找一篇说的还不错的
深入理解浏览器的缓存机制
另外补充一点,浏览器识别文件靠的是文件名,所以当一个文件名在浏览器里第一次出现时,他就会根据浏览器的机制被缓存,下次请求同名文件时,就会从缓存中读取
所以为了不让浏览器把发版时候的文件缓存,最好的方式就是变更文件名
js,css等资源的缓存清理
在使用现代的前端开发框架时,webpack已经给我们配置好了前端资源的缓存机制hash,chunkhash,contenthash.这3种hash具体有啥区别,这篇文章不做解释,大家可以自己去搜索.只要知道原理就是如果文件被修改,这些hash会变动,导致发布时的资源名不同,浏览器缓存未被命中,从而更新缓存.
另一种情况,是我们没有使用webpack等工具时,可以手动给文件添加一个随机参数,来代替hash,从而达到更改文件名的效果.例如:http://www.baidu.com/test.js?v=123456.
在每次发版时,修改v=xxxx,即可达到和hash一样的效果
html文件的缓存清理
html文件本身是可以通过hash和加随机参数来清除缓存的.但是对页面访问入口变更文件名是不实际的行为,实际上很少使用.对于html文件的缓存控制基本都是在服务器端来执行,通常是在Response Headers头里添加Cache-Control,Expires,Etag,Last-Modified.
至于网上还有说可以直接在html中通过meta添加以上头部,经过测试,这个基本没什么卵用,还是要靠服务器来配置
