彻底解决前端发版白屏问题和解决方案

彻底解决前端发版白屏问题和解决方案

码农世界 2024-06-04 前端 95 次浏览 0个评论

面临的问题: 缓存失效后页面未刷新或者新打开的页面会因为无法加载正确的资源而白屏,单页面的项目,客户不想每次发版都刷新,也不希望每次都重新加载资源文件,也即是缓存也需要。这个需求十分的让人头疼,可偏偏魔高一尺道高一丈,因为你是乙方这个时候你去辩解什么甲方都在觉得你在扯😄~

小编开始发功了,首先百度了一大片一大片的都是说什么协商缓存,nginx之类的东西,我也去和运维batttle过,你是知道运维觉得这个事事不关己高高挂起,呵呵了  

不知道你们公司的运维是什么样子的,但我们的公司就是这样,包括域名统一时 需要找到不同前端项目的服务都是我作为一个前端的身份去实现的,你可以想象得到么

我是谁,我在哪,我在干什么😠

不好意思,跑题了,我的意思,当遇到问题时没有人会去主动的帮你或者和你一起解决,一旦有这样的人请你珍惜,因为这样的人少之又少。

好,接下来言归正传!

解决问题:发版后本地前端页面白屏,缓存失效通过刷新前端页面

思路:

1.增加入口文件发版版本时间信息,在前端访问时与sessionStorage 的缓存版本比对,通过强制刷新获取最新资源文件

2.nginx增加禁用入口文件缓存和协商缓存

3.需要考虑到文件和接口加载的顺序

打包文件配置处理:

 前端入口文件的修改:

获取版本信息:

完整代码:

可私信我~github仓库地址:github还在一步步完成搭建完整业务

转载请注明来自码农世界,本文标题:《彻底解决前端发版白屏问题和解决方案》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,95人围观)参与讨论

还没有评论,来说两句吧...

Top