前端更新需要清空浏览器缓存_前端发布生产包时清理浏览器缓存

比如有分PC端和移动端

移动端的处理方法是：

输入www.exu.com跳到

(移动端)

https://exu.com/wap/?random=0.03925765723826302#/

浏览器识别缓存的原理

浏览器识别文件靠的是文件名,所以当一个文件名在浏览器里第一次出现时,他就会根据浏览器的机制被缓存,下次请求同名文件时,就会从缓存中读取

所以为了不让浏览器把发版时候的文件缓存,最好的方式就是变更文件名

js,css等资源的缓存清理

在使用现代的前端开发框架时,webpack已经给我们配置好了前端资源的缓存机制hash,chunkhash,contenthash.

如果文件被修改,这些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.