V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
scienhub
V2EX  ›  Vue.js

vite + vue3 项目如何提升加载速度,及删除不必要的加载项

  •  
  •   scienhub · 145 天前 · 2410 次点击
    这是一个创建于 145 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我们项目前端是用的 vite + vue3, 但是发现首页加载相对比较慢的,而且加载了很多其他页面需要,但是首页不需要的 js 文件。

    请问:

    1. 如何提升加载速度,让 js 等文件的加载不阻塞首页显示呢?
    2. 如何只加载必须的文件?

    图片我们都已经做了 lazy-loading, 这里想请问 js 和 css 文件如何只加载必须的文件,以及尽量让加载不阻塞页面渲染。

    我们测试服务器的地址是: https://beta.scienhub.com, bundle visualizer: https://beta.scienhub.com/stats.

    其中像是 monaco-editormathajax 都是和首页毫无关系的文件,但是仍然在首页加载项里。

    22 条回复    2024-08-03 13:50:58 +08:00
    lucasj
        1
    lucasj  
       145 天前
    测试服务器宽带太小了,感觉是 1M 的宽带
    yandif
        2
    yandif  
       145 天前
    我怎么感觉是你使用 VPN 进行访问的问题呢,使用 VPN 后:加载了 1 分钟,关了 VPN 后不到两秒就加载完了。
    scienhub
        3
    scienhub  
    OP
       145 天前
    @yandif 我没有用 vpn 诶?
    sleepwalker
        4
    sleepwalker  
       145 天前
    不是是部署在国外?资源加载有点慢
    tomjack
        5
    tomjack  
       145 天前
    打包的时候针对资源有做分包吗? 可以发个截图看看

    还有,我这里的 gif 加载了 4s 多
    lucasj
        6
    lucasj  
       145 天前
    应该破案了。

    原因:OP 的网站用了 cloudflare ,第一次访问,没有缓存,所以很慢。

    第一次:cf-cache-status: MISS 很慢 10s 。
    第二次:cf-cache-status: HIT 很快 300ms 。

    参考:Cloudflare not caching on the first visit
    https://community.cloudflare.com/t/cloudflare-not-caching-on-the-first-visit/299265

    请问你的服务器部署在国内还是国外啊?
    Retas
        7
    Retas  
       145 天前
    跑一波 Lighthouse
    seeu2ex
        8
    seeu2ex  
       145 天前 via iPhone
    我点进去超过 5 秒都没显示出来
    karott7
        9
    karott7  
       145 天前
    1. vite 配置里增加 build.rollup.output.manualChunks 配置,尽可能 node_modules 的依赖都打包到一个文件中
    karott7
        10
    karott7  
       145 天前
    1. vite 配置里增加 build.rollup.output.manualChunks 配置,尽可能 node_modules 的依赖都打包到一个文件中
    2. cache-control 缓存时间有点短,建议设置成一年 (public, max-age=31536000)
    3. 首页用的大组件(比如 pdf ,katex )建议封装成组件,然后动态引入,类似 react 中 suspend 的处理逻辑
    scienhub
        11
    scienhub  
    OP
       144 天前
    scienhub
        12
    scienhub  
    OP
       144 天前
    @karott7
    1. 这个我们已经做了
    2. cf 的缓存会设置的更长些。
    3. 我问题的关键就是,pdf ,katex 这些和主页“没有任何关系”,是其它页面用的。但不知为何会在主页的加载项里。
    scienhub
        13
    scienhub  
    OP
       144 天前
    @lucasj 服务器在我家中,国外的宽带。
    scienhub
        14
    scienhub  
    OP
       144 天前
    @tomjack
    是指 build 后的 js 文件列表么?太长了粘贴不下,不过我感觉 https://beta.scienhub.com/stats 这里是能看到 bundle size 的呀?
    scienhub
        15
    scienhub  
    OP
       144 天前
    @tomjack 其实我的问题是,mathjax ,katex 这些和主页“毫无关系的”js 文件,是如何出现在主页的加载项里的。。。
    acthtml
        16
    acthtml  
       144 天前
    @scienhub #12

    对于 3 ),因为这些类库“在其他页面是公共类库”。
    acthtml
        17
    acthtml  
       144 天前
    @scienhub #12

    要我优化的话,先用构建分析工具找出无用包和大体积包;其次利用配置 build.rollupOptions.output.manualChunks 将特定包拆分出去;最后利用异步加载来优化首屏速度。
    Charrlles
        18
    Charrlles  
       144 天前 via iPhone
    正常来说,用了 dynamic import 之后,首页不应该包含没用到的库,应该仔细检查一下组件的引入方式,一个是确保 dynamic import 是在运行时里写的,一个是看看那些非必要的库是不是被某个公共组件用到了,这个公共组件又被首页用到了
    Charrlles
        19
    Charrlles  
       144 天前 via iPhone
    看了下你的 bundle 分析图,看起来首页和其他页面根本没分出来,是不是路由里没有用 dynamic import
    scienhub
        20
    scienhub  
    OP
       144 天前
    @Charrlles 这是我们 router 的代码截图,除了上面的一些是 import 的,下面的 router 中每个路由都是 dynamic import 的

    ![]( https://imgur.com/8PzNFl5.jpg)
    scienhub
        21
    scienhub  
    OP
       144 天前
    @Charrlles @Charrlles 这是我们 router 的代码截图,除了上面的一些是 import 的,下面的 router 中每个路由都是 dynamic import 的

    ![]( https://imgur.com/8PzNFl5.jpg)
    scienhub
        22
    scienhub  
    OP
       144 天前   ❤️ 1
    @Charrlles 破案了,就是最上面几个 import ,改为 dynamic import 就解决了。
    十分感谢!!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1464 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 17:19 · PVG 01:19 · LAX 09:19 · JFK 12:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.