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

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

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

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

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

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

好,接下来言归正传!

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

思路:

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

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

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

打包文件配置处理:

 前端入口文件的修改:

获取版本信息:

完整代码:

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

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weifont

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值