微信浏览器缓存导致白屏，我们该如何解决和避免？

微信浏览器缓存

做前端开发的小伙伴肯定都经历过，项目升级后，原本公众号内的链接，访问进去白屏了，有些人甚至刷新都没有效果，在生产环境中这可是个大问题。

很多小伙伴说给 url 加版本号或者时间戳，在某些浏览器实现忽略参数的情况下，也依然起不到很好的效果。

归根结底就是前端资源被微信浏览器强缓存了。

现在大多前端项目都是用一些主流的打包工具进行打包，例如：webpack、rollup 等，我们的 js、css 文件都可以在打包的时候设置带有 hash 值的文件名，对于浏览器来说，资源地址变了，就可以有效的规避掉缓存问题。

但是，拿 Vue 项目为例，入口文件 index.html 这个文件是不会变得，但是里面引入的 js、css 会随着打包的变化而变化，这就导致之前说的，白屏问题。

由于第一次发布时没有配置 Cache-Control：no-cache ，触发了浏览器默认缓存静态资源的策略：

max-age =（你访问的时间 - 最后一次修改时间）/ 10

所以，这就造成 index.html 文件还是老的，但是 js、css 文件都更新了，由于这些资源文件都带 hash，所以服务端这边资源就访问不到了，导致页面白屏。

强缓存：不会和服务器交互，不会发起请求

协商缓存：会和服务器交互，来判断资源有没有变化

这张图就很清晰的表达了整个浏览器缓存命中的过程，而我们之前的问题正式命中了浏览器的强缓存。

而强缓存的特点就是：强缓存发现资源未过期时，会直接返回 200 (from memory cache 或者 disk cache)。目的本身是为了减少网络请求的时间消耗而实现页面快速加载，但是用不好，也是一个双刃剑啊，尤其是单页面应用需要经常发布的场景下。

既然了解了浏览器的缓存机制，也了解了问题的原因，那么解决办法就很明显了。

一句话，想办法让客户端请求一次服务端把新的资源拿到！

如果是直接请求*.html 的方式，可以考虑文件名后增加随机数或者时间戳，url 的变更会触发重新请求。但是，如果是通过 nginx 转发访问到 index.html 的情况，我试过但线上依然会有白屏的案例出现，因为毕竟是 get 请求 text/html 文本资源。
给原项目增加 path，类似 xxx.com/#/ 改为 xxx.com/nocache/#/ 这种方式，确保浏览器会重新发起请求。

当然，以上的方案都是治标不治本，属于补救措施。

其实，我们可以使用协商缓存与强缓存配合的方式，来达到客户端既能及时响应，又可以在未发布时提高加载效率。

我们可以利用协商缓存的机制来处理入口文件 index.html 和一些图片资源，在其更新之后立即拉取，未更新时返回 304 来命中缓存。

其余的文件资源（js、css、json、字体文件等）则可以采用周期强缓存，这个周期可以选平均发版周期或半个发版周期这样，来减少 http 请求连接数。

至于如何激活协商缓存，那就是文章开头提到的：Cache-Control: no-cache。

关于Cache-Control，本文不做进一步介绍，有兴趣的小伙伴可以前往 MDN查看。

很多项目工程中遇到的问题，不单单是前端开发本身的问题，我们依然需要了解包括代码运行环境，计算机网络等很多相关知识才可以解决。

保证基本功的同时，也多多了解其他相关知识才能帮助我们在这条路上走的更远~

PS：开发过程中遇到的各种问题都建议做一下笔录哦~

时间久了你会感谢自己的~