前端部署后,客户没有清缓存的情况下无法更新,解决:index.html 缓存优化

原理:

HTTP 304状态码的详细讲解

https://blog.csdn.net/qq_37960324/article/details/83374855

304状态码或许不应该认为是一种错误,而是对客户端有缓存情况下服务端的一种响应。

整个请求响应过程如下:

客户端在请求一个文件的时候,发现自己缓存的文件有 Last Modified ,那么在请求中会包含 If Modified Since ,这个时间就是缓存文件的 Last Modified 。因此,如果请求中包含 If Modified Since,就说明已经有缓存在客户端。服务端只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。

HTTP 304状态码的详细讲解 - gxw123 - 博客园


第一次访问之后,再次刷新(F5)访问,此时服务器返回304,即没有返回请求文件页面内容而只是一个 HTTP Header。所以渲染的index.html是浏览器本地缓存的文件。





强刷新(CRTL+F5)返回200


ctrl+F5强刷新,强制浏览器请求远程资源,不请求缓存。此时远程还没发版,所以请求的还是远程之前的文件。


接下来操作发新版……



发的发



接下来再操作发第2个新版……

再刷新



解决:

优化1:配置nginx  index.html 不缓存。

配置nginx 后的效果:无论刷新多少次,index.html都返回200,即每次都请求远程最新文件


index.html链接的js文件还是遵循http协议,再次请求时js文件来自缓存。


怎么解决发版更新文件后浏览器还是请求到缓存的js文件呢?
原因:每次发版 js文件如果还是同一个名字,浏览器认为没有更改,还是拿缓存文件。

解决:每次发版构建js文件时,修改js文件名 ,添加当前时间戳。如:895.bundle.1665737667064.js

发的发的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容