怎么打败微信内置浏览器的恐怖缓存

事情的起因

在上周五的一次发版，在我的想象中，应该又是一次平平无奇的发版，我很淡定的在微信聊天框里面点开了链接。

"哦hou，怎么还是上次的版本？运维还没有发版本了？"

"@运维，请问发版结束了吗？"

"已发版"，运维很快会了三个字。

我就知道，又是微信浏览器缓存的问题。

解决方案

是的，很快，啪的一下，如果各位不想看分析过程，那么请看解决方案：

步骤1. 修改打包文件，打包后的 css、js 都加上唯一哈希值

这个就根据打包工具来设置就行了，打开 ai 工具，直接问：

"我是 webpack/vue cli/vite 等，怎么打包文件，打包后的 css、js 都加上唯一哈希值"

步骤2. 改 html 的响应头

给html加上响应头：Cache-Control: no-cache, no-store, must-revalidate

响应头说明：浏览器、CDN、代理服务器都不要缓存这个资源，用户每次访问都去服务器拿最新的。

参考代码：

nginx 复制代码

location ~* \.(html)$ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

分析过程

事实上，我之前一直无视这个问题，因为 dev、uat 环境之前已经配了 Cache-Control: no-cache, no-store, must-revalidate，所以没发现。

而且好几次上线都能拿到最新的，没想到第三次的时候，突然来这样子搞，一时不察。

先定位原因，直接上抓包工具，这里我用的是 appStore 的 Stream，去下载，这个好用

为啥没有安卓的，因为安卓抓 https 的包，需要 root 权限，我实在没有安卓手机，也没法推荐了，抱歉

我一抓包，一看，完全没有 js、css 的请求，只有 html，我就知道了，微信缓存。

立刻找同事，让它清除缓存看看，成功！

好了，可以开始拉会议对接这个问题了，叭叭叭跟相关人员讲了一堆，运维说："啊，没想到微信缓存那么久的？"

最后的一段文字

我从事前端开发的日子里，微信的缓存总是犹如梦魇一般，在每次的项目里都会出现。

"怎么打开异常了？有 bug" "怎么页面还是旧的啊" "打开后弹窗报错了"

"亲，这是微信缓存，你清一下"，我哈哈哈的无语了。

而且吊诡的微信浏览器在早些年，就算你用了各种手段，它都是拉了旧的 html，还好新时代好了

现在的话，一般在 解决方案 这两板斧下去，都没问题的。

此致，古德拜