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

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

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

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

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

好,接下来言归正传!

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

思路:

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

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

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

打包文件配置处理:

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

 前端入口文件的修改:

彻底解决前端发版白屏问题和解决方案插图(1)

获取版本信息:

彻底解决前端发版白屏问题和解决方案插图(2)

完整代码:

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

本站无任何商业行为
个人在线分享 » 彻底解决前端发版白屏问题和解决方案
E-->