请教一下,前端发布版本,用户会白屏 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
neptuno
V2EX    问与答

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

  •  
  •   neptuno 2022-07-17 10:00:11 +08:00 2522 次点击
    这是一个创建于 1181 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我是属于后端,帮我们组前端问一下,现状是每一次发布版本,前端 hash 值改变了,用户点击路由到其他页面,会出现白屏,显示找不到页面。要刷新一下才能解决。我初步想法是每次发布加一个版本号,后端返回版本号,但前端找不到合适的调用时间点。有啥解决方案吗?
    15 条回复    2022-07-17 15:24:53 +08:00
    wukongkong
        1
    wukongkong  
       2022-07-17 10:01:36 +08:00 via Android
    打包出来文件没有 hash 值,导致访问了本地文件?
    shakaraka
        2
    shakaraka  
    PRO
       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 ,检测到版本更新后台下载,下载完了弹个框提示用户刷新一下
    shakaraka
        7
    shakaraka  
    PRO
       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
    前端路由切换前查询一次或者直接轮询
    和当前版本不一致就直接刷新页面
    callv
        12
    callv  
       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     Solana     2975 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 30ms UTC 12:10 PVG 20:10 LAX 05:10 JFK 08:10
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86