卢纳黍的想疗院


一个不太正经的前端狗,爱纹身、玩乐队、金属乐、专门写Bug~


微信内置浏览器点击浏览器「返回」后不执行js脚本

最近遇到一个很奇葩的问题

同一套代码,部署在测试和生产两套服务上

测试环境 一台ECS 域名直接进ECS的NGINX

生产环境 域名进SLB,SLB打到两台生产ECS上进NGINX

进入H5落地页后会跳转去授权,再重定向回H5落地页,这时候会产生路由history。也就是说浏览器的「返回」按钮会亮起可点击。

测试环境没有任何问题,但是生产出了幺蛾子

这时点击浏览器的「返回」按钮,出现了白屏,查看network发现落地页html 从磁盘读取,外联script和css 都正常获取并且也是从磁盘读取。但是读取完外联js文件后却不知行js脚本,导致SPA页面完全白屏。

baidu & google了半天,查到临时解决方案

在index.html内添加如下代码:

var isPageHide = false;
window.addEventListener("pageshow", function(e){
    console.log('window.pageshow: ', e)
    if (isPageHide) {
      location.reload();
    }
});
window.addEventListener('pagehide', function () {
    isPageHide = true;
});

原因猜测:

猜测引发的原因为BF Cache(back-forward Cache)所造成的问题,

当我打开Network调试器时,勾选「停用缓存」,则不会引发此问题。

困惑:

如果真是因为BF Cache造成的问题,为什么测试环境正常,唯独生产环境会有这个问题???

难道是说因为生产环境是通过SLB分流打到ECS上的,所以在这个环节有什么设置上的不同???

2023-01-24 更新

发现了「测试环境」和「生产环境」的差异原因在于Vite的build策略

当 NODE_ENV 为 production 时,vite 采用rollup进行打包,而非 production 进行打包时 vite会模拟一个类似rollup的机制环境进行打包,才造成了「测试」和「生产」的机制差异,但具体时rollup 打包过程中哪个环节造成的差异还在探索中。。。

建议打赏金额1-10元

支付宝打赏

微信打赏

更早的文章

多彩console

代码 console.log('\033[42;30m DONE \033[40;32m Compiled successfully in 19987ms\033[0m') 输出…

继续阅读
comments powered by Disqus
沪ICP备15043964号-3