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 · 1637 次点击
    这是一个创建于 525 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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   ·   我们的愿景   ·   实用小工具   ·   1964 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 16:22 · PVG 00:22 · LAX 09:22 · JFK 12:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.