V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
neptuno
V2EX  ›  问与答

请教一下,前端发布版本,用户会白屏

  •  
  •   neptuno · 2022-07-17 10:00:11 +08:00 · 2200 次点击
    这是一个创建于 864 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我是属于后端,帮我们组前端问一下,现状是每一次发布版本,前端 hash 值改变了,用户点击路由到其他页面,会出现白屏,显示找不到页面。要刷新一下才能解决。我初步想法是每次发布加一个版本号,后端返回版本号,但前端找不到合适的调用时间点。有啥解决方案吗?
    15 条回复    2022-07-17 15:24:53 +08:00
    wukongkong
        1
    wukongkong  
       2022-07-17 10:01:36 +08:00 via Android
    打包出来文件没有 hash 值,导致访问了本地文件?
    wunonglin
        2
    wunonglin  
       2022-07-17 10:01:39 +08:00
    index.html 不缓存
    think2011
        3
    think2011  
       2022-07-17 10:02:21 +08:00
    目测是原先的文件被删除了,导致请求不到。

    简单的做法是不要删除的旧的 hash 文件就好,这样用户在刷新前依然可以用旧版本
    neptuno
        4
    neptuno  
    OP
       2022-07-17 10:07:09 +08:00
    @think2011 谢谢,我们先尝试下不删除文件
    neptuno
        5
    neptuno  
    OP
       2022-07-17 10:09:29 +08:00
    @wunonglin 不缓存的话,我们没加 cdn ,加载比较慢
    learningman
        6
    learningman  
       2022-07-17 10:20:45 +08:00 via Android
    用 serviceworker ,检测到版本更新后台下载,下载完了弹个框提示用户刷新一下
    wunonglin
        7
    wunonglin  
       2022-07-17 10:32:18 +08:00
    @neptuno #5 index.html 没多大,再加上你缓存的话那就不要把原来的文件给删了。
    neptuno
        8
    neptuno  
    OP
       2022-07-17 10:56:28 +08:00 via iPhone
    @learningman #6 谢谢,这个我待会儿研究下
    GreatAuk
        9
    GreatAuk  
       2022-07-17 11:41:06 +08:00
    哈哈,试下我写的插件? https://github.com/GreatAuk/plugin-web-update-notification 。 这两天看下再加个 webpack 插件支持
    GreatAuk
        10
    GreatAuk  
       2022-07-17 11:42:48 +08:00
    @learningman 加 pwa 支持有成本的,而且如果不熟悉就上,很简易整成强缓存 ,用户刷新都不生效。
    dusu
        11
    dusu  
       2022-07-17 12:08:43 +08:00 via iPhone
    写个固定路径的版本 js
    前端路由切换前查询一次或者直接轮询
    和当前版本不一致就直接刷新页面
    gzyguy
        12
    gzyguy  
       2022-07-17 12:39:30 +08:00
    现在前端构建出来的静态资源一般默认都带上 hash 吧?是不是因为用户在升级后页面资源还停留在历史版本上导致的 ?
    zhouyg
        13
    zhouyg  
       2022-07-17 14:00:00 +08:00
    大概率旧资源被删除了或同名文件,因为 code splitting 和 懒加载,用户可能已经先 load 了 旧 chunk1 ,点击跳转的时候应该跳转的旧 chunk2 。如果发布后旧资源被清理,就会导致加载不到 chunk2 或者 加载到的是新 chunk2 。可以在构建时在资源路径加上 版本标识,同时保留历史版本
    zhzy0077
        14
    zhzy0077  
       2022-07-17 14:18:25 +08:00
    我们也是通过版本号来发布切流的. SPA 的话一般在主入口去查版本号就行了, 已经在浏览的用户就继续用旧版直到刷新也没问题.
    不过我们的版本号不是后端控制的, 后端没做 CDN 或者 CDN 做的不好的话很容易影响首屏, 我们一般就前端 CDN 或者 OSS 上放一个文件, 直接改文件, 前端去拿出来就行了
    otakustay
        15
    otakustay  
       2022-07-17 15:24:53 +08:00
    仅解决前端问题的话,发布的时候别把上次的东西删了就好了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2797 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 00:24 · PVG 08:24 · LAX 16:24 · JFK 19:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.