V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Neil66
V2EX  ›  前端开发

前端发布新版本后,如何自动清除用户浏览器页面缓存,有哪些方案?

  •  
  •   Neil66 · 2022-07-09 09:34:23 +08:00 · 3389 次点击
    这是一个创建于 855 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近在项目上调整了前端调用 API 时 header 的内容,发布后发现由于用户本地缓存,导致 header 内容不对,进而请求 API 接口失败。 因为是内部项目,以往都是告诉用户清除一下缓存再使用,但是感觉不太优雅,而且浏览器还会缓存一些用户自定义的 table 样式,无脑的清除缓存也存在一些问题。 请各位大佬赐教!

    16 条回复    2022-07-17 17:14:06 +08:00
    richangfan
        1
    richangfan  
       2022-07-09 09:37:52 +08:00
    接口和 index.html 文件设置 max-age 之类的响应头,其他文件不需要
    dcsuibian
        2
    dcsuibian  
       2022-07-09 10:02:09 +08:00 via Android   ❤️ 1
    改名字,html 不缓存。
    举个例子,如果原来的 js 文件是 a.js ,新的 js 文件是 b.js 。
    在 html 里原来的 link 指向 a.js ,现在就变成指向 b.js 。浏览器发现文件名不同就会再发出请求。a.js 的缓存仍然有效,但 a.js 已经不会再使用了。
    dcsuibian
        3
    dcsuibian  
       2022-07-09 10:06:33 +08:00 via Android
    现代点的前端就是这么干的,webpack 就可以。
    把需要的静态资源分割成块,每一块计算哈希值。文件变化后对应块的哈希值变了。同时帮你修改生成的 index.html 。
    这样没变的块仍然可以走缓存(比如说依赖的类库啥的),变了的块就用新的。
    dcsuibian
        4
    dcsuibian  
       2022-07-09 10:17:09 +08:00 via Android
    还有一种不改文件名的方式,是加入查询参数。
    比如 a.js?ppp=xxxxxxxxx
    YNaN
        5
    YNaN  
       2022-07-09 10:22:49 +08:00
    脚手架出入口的 hash 命名规则改下
    wanguorui123
        6
    wanguorui123  
       2022-07-09 10:37:38 +08:00
    用 ETag 然后把 Cache 设置短点
    kekxv
        7
    kekxv  
       2022-07-09 11:48:11 +08:00 via iPhone
    你们自己问题,没事瞎改拦截,还不兼容上一版本
    wu67
        8
    wu67  
       2022-07-09 12:09:27 +08:00
    现在的脚手架工具默认都是 build 的时候给文件加上 hash 了吧. 除非你那个用户就开着页面一直不刷新, 只在当前页面点点点, 这样 index.html 里面的 js 路径貌似不会变...
    arch9999
        9
    arch9999  
       2022-07-09 12:21:00 +08:00
    ```
    <link rel="stylesheet" href="/static/css/vendor/tomorrow.css?v=3c006808236080a5d98ba4e64b8f323f" type="text/css">
    <link rel="icon" sizes="192x192" href="/static/icon-192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon-180.png?v=91e795b8b5d9e2cbf2d886c3d4b7d63c">
    ```

    按 F12 看看本页面。
    wangkun025
        10
    wangkun025  
       2022-07-09 12:28:16 +08:00
    Rails 框架用的是改名字吧。
    Pooc
        11
    Pooc  
       2022-07-09 12:45:29 +08:00
    像 Webpack 、Vite 之类的打包,生成的 js 之类的静态文件默认会改哈希值文件名,只需要运维设置下 index.html 不缓存就可以了
    agagega
        12
    agagega  
       2022-07-09 12:46:37 +08:00
    Rails 的方案是:假如目标文件叫 vendor.js ,那最终输出的文件就是 vendor-xxxxx.js (一段 hash),不用 query string 是因为某些地方做缓存的时候说不定也会把 query string 忽略掉
    LeegoYih
        13
    LeegoYih  
       2022-07-09 12:52:17 +08:00
    请求静态文件加时间戳或签名就行,如:main.min.js?t=123456
    suyanhanx
        14
    suyanhanx  
       2022-07-10 22:03:43 +08:00
    大公司里怎样开发和部署前端代码? - 张云龙的回答 - 知乎
    https://www.zhihu.com/question/20790576/answer/32602154
    mingdongshensen
        15
    mingdongshensen  
       2022-07-17 17:06:49 +08:00
    ServiceWorker + Notification APIs, 在主线程里根据推送来的消息内容自定义任何你想做的 dom 相关操作,比如这时候可以主动通过推送告诉用户网页更新版本了,让用户点击一个你提供的小按钮,触发网页重载
    mingdongshensen
        16
    mingdongshensen  
       2022-07-17 17:14:06 +08:00
    @dcsuibian 我感觉还需要一个推送功能,及时告诉用户,此时此刻你的 html 不是最新版本,你需要手动刷新页面或者你需要同意我帮你自动刷新一下页面
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2707 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 07:30 · PVG 15:30 · LAX 23:30 · JFK 02:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.