关于vite项目中可能存在的前端资源加载报错

直接上事故现场:

关键字:LINK load fail,preloadError,vite,preload

vite官方文档

构建生产版本 | Vite 官方中文文档

事故产生原因分析

这个报错大量发生在项目重新部署后,按照官方的说法是缓存问题

为了解决缓存问题,前端做了什么?

产物名称加hash

防止重新部署后,因为浏览器缓存了部分之前版本的文件,用户端混淆着新旧版本的代码,导致项目出错,当然这个优化这个vite已经默认帮我们做了

产物增量部署

防止重新部署后,用户加载的html还在历史版本,假如部署时删掉历史版本的产物,在历史版本的用户可能会因加载不到旧版本的资源文件报错

<meta http-equiv="cache-control" />

html 复制代码
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />

在入口HTML文件中,可以配置这个meta标签,来告知浏览器不要缓存HTML文件

划重点

然而,通常来说服务端返回的response header中的缓存策略可能优先级更高!所以......最好在Nginx中配置响应头,而不是在HTML中配置

ps:关于这块内容,可以自行百度浏览器中的强缓存和协商缓存学习,(多年背的面试题终于派上用场了)

域名加版本号/时间戳后缀

bash 复制代码
<web-view
  :src="`https://www.baidu.com?__v=${versionCode}&__t=${dayjs().unix()}`"
/>

(别问,问就是write once、debug anywhere 的uniapp开发)

and more

可能还有疏漏的地方......

做的还不够吗?

c端应用的运行环境确实复杂,可能也有笔者疏漏的地方,总之还是按照vite的文档加上

js 复制代码
window.addEventListener('vite:preloadError', (event) => {
  window.location.reload() // 例如,刷新页面
})

最后别忘了

js 复制代码
window.removeEventListener('vite:preloadError', callBack)
相关推荐
namekong817 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天18 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄20 小时前
HTML 表单控件
前端·microsoft·html
学习笔记10121 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194321 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧1 天前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台1 天前
海龟交易系统R
前端·人工智能·r语言
歪歪1001 天前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc1 天前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅1 天前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学