出现的问题:
- 大部分苹果手机,部分安卓手机第一次关注公众号时进入页面更新会出现白屏情况,或者内用没有更新,需要用户主动刷新才能解决
为什么会出现和解决方案:
- 1,一般情况js,css等文件添加版本号或者随机值会解决缓存问题如
<script src="./test.js?v20210.12.27"></script>
- 2, 文件名使用hash形式
<script src="./static/js/chunk-vendors.6b4d5929.js"></script>
- 3, 在html中添加标签的缓存设置
//用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.)
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
微信浏览器由于js文件有hash,上面用于防止版本更新之后还访问到老的文件。微信缓存了index.html入口文件,导致还访问老版本的js文件。由于老版本被删掉,所以白屏。
location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js)$ {
add_header Last-Modified $date_gmt;
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
if_modified_since off;
expires off;
etag off;
}
参考链接1
参考链接2