关于一个按需引入的疑问 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a Javascript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
Javascript 权威指南第 5 版
Closure: The Definitive Guide
caisanli
V2EX    Javascript

关于一个按需引入的疑问

  •  
  •   caisanli 2022-10-20 19:47:40 +08:00 2327 次点击
    这是一个创建于 1159 天前的主题,其中的信息可能已经有所发展或是发生改变。

    RT

    现在前端这边很多采用按需引用模块

    但是这样其它模块的资源就没被加载到

    如果这时发布了新版本

    用户又没刷新页面

    并点击了其它模块

    这时可能就遇到其它模块的资源文件 404

    从而加载失败


    目前公司微前端的子系统是 vite 项目

    最近和测试在扯这个问题

    也做了些优化

    监听如果是要加载 js 文件却加载了 html

    就提示用户刷新页面

    20 条回复    2022-10-21 18:18:39 +08:00
    chenluo0429
        1
    chenluo0429  
       2022-10-20 20:26:50 +08:00
    线上环境有 CDN ,没有预热就再次更新版本的概率不高,真的命中也没办法,为这种 edge case 做优化总感觉怪怪的
    chenluo0429
        2
    chenluo0429  
       2022-10-20 20:27:37 +08:00
    真的有需要我们也会向客户端推送事件,触发客户端自刷新的
    icySoda
        3
    icySoda  
       2022-10-20 20:35:01 +08:00 via iPhone
    为什么会 404 ,难道不是加载到上一个版本的 js 文件吗?
    caisanli
        4
    caisanli  
    OP
       2022-10-20 20:39:48 +08:00
    @chenluo0429 自刷新有点突兀,想着有提示会好些。主要是测试阶段 更新很频繁。 突然想到 应该存一份旧的包在那里...好像也解决不了根本问题
    caisanli
        5
    caisanli  
    OP
       2022-10-20 20:40:57 +08:00
    @icySoda 上一个版本的 js 已经被新的替换了 浏览器也没有缓存 所以会 404
    rabbbit
        6
    rabbbit  
       2022-10-20 20:43:31 +08:00
    加配置让生成的 js 文件名带 hash
    然后旧的 js 文件不要删
    caisanli
        7
    caisanli  
    OP
       2022-10-20 20:46:45 +08:00
    @rabbbit 默认都会加 hash 。旧的包不删倒是能解决,只是发版多了后就会有占空间(虽然不多)。
    rabbbit
        8
    rabbbit  
       2022-10-20 20:51:12 +08:00
    留着没啥问题,实在讨厌可以隔几年再删。
    很多后端也不会清理冗余文件,这些东西才更占地方。
    caisanli
        9
    caisanli  
    OP
       2022-10-20 20:54:51 +08:00
    @rabbbit 哈哈哈可以和运维商量一下
    icySoda
        10
    icySoda  
       2022-10-20 21:06:28 +08:00 via iPhone
    @caisanli 为啥要删,就这点文件体积,积累到公司倒闭都没多少空间。
    aaronlam
        11
    aaronlam  
       2022-10-20 21:07:28 +08:00
    一般会采取增量发布的方式的啊,肯定不会直接把上一版本的直接干掉把。而且资源 hash 是文件名的一部分
    aaronlam
        12
    aaronlam  
       2022-10-20 21:08:55 +08:00
    @caisanli

    相比于线上用户用着用着报错,这点占用真的不算什么吧,而且可以采取半年一清的方式来清楚旧的资源。
    caisanli
        13
    caisanli  
    OP
       2022-10-20 21:21:54 +08:00 via iPhone
    @aaronlam
    @icySoda
    焕然大悟!我们现在测试和生产部署都是干掉之前的包,明天和运维商量下。
    aaronlam
        14
    aaronlam  
       2022-10-20 21:24:53 +08:00   1
    jarven123
        15
    jarven123  
       2022-10-21 10:28:43 +08:00
    我们为了让用户尽快使用新版,会在打包的时候生成一个 json 记录当前的版本信息,并且在 html 打上标记,然后每次切换路由的时候拿当前 html 标记的版本和生成的 json 中的版本信息对比,如果需要更新就直接 reload 页面
    caisanli
        16
    caisanli  
    OP
       2022-10-21 11:33:51 +08:00 via iPhone
    @jarven123 这样会写兼容代码 而且不一定是路由 一个弹窗组件也会引起
    jarven123
        17
    jarven123  
       2022-10-21 14:40:32 +08:00
    @caisanli 那就上 CDN 缓存就好了
    daysv
        18
    daysv  
       2022-10-21 15:51:13 +08:00
    这有啥的, 每次打包资源名称都是根据内容的 hash 值, 发版本先发资源, 后发 index.html.
    发版不删除, 无脑覆盖.
    over
    daysv
        19
    daysv  
       2022-10-21 15:52:22 +08:00
    ```js
    router.onError((error) => {
    const isChunkLoadFailed = /Loading (\w| )*?chunk (\d)+ failed/.test(error.message)
    if (isChunkLoadFailed) {
    window.location.reload()
    }
    })
    ```
    我这还写过一个粗暴的代码在懒加载路由里, 虽然现在没啥用.
    bebop
        20
    bebop  
       2022-10-21 18:18:39 +08:00
    加版本号
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     955 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 28ms UTC 22:18 PVG 06:18 LAX 14:18 JFK 17:18
    Do have faith in what you're doing.
    ubao msn 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