单页面应用(SPA)重新部署后,正在浏览的页面如何更新缓存?

  • 当单页面的系统在重新部署更新时,此时正在浏览网页,并且已经在网页内的用户,始终会使用老的js与css文件,一直在使用已经缓存了的静态资源。
    所有的缓存问题焦点都在index.html上,只要index.html刷新即可重新获取代码。
    出处:https://www.cnblogs.com/mamimi/p/9179244.html

想到的一个较好的解决方案:

  1. webpack打包时,设置一个唯一的打包字符串(比如:当前时间戳),存到一个文件里(最好是json文件,此文件不缓存);
  2. 将打包字符串存在 localStorage 中;
  3. 进入每个路由时,比较 localStorage 中的打包字符串与文件中新的打包字符串是否一致。不一致的话,刷新页面。
  4. 将新的打包字符串,存入 localStorage。

该方案详细实现例子:https://segmentfault.com/a/1190000021853289

待研究方案:

Nginx 配置不缓存单页面应用的 index.html。

其他相关文章:

https://segmentfault.com/q/1010000006166458
https://www.zhihu.com/question/263969779

posted on   cag2050  阅读(3800)  评论(2编辑  收藏  举报

编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!

导航

点击右上角即可分享
微信分享提示