vite + vue3 项目如何提升加载速度，及删除不必要的加载项
scienhub · batchfy · 2024-08-02 16:00:48 +08:00 · 2938 次点击这是一个创建于 376 天前的主题，其中的信息可能已经有所发展或是发生改变。
我们项目前端是用的 vite + vue3, 但是发现首页加载相对比较慢的，而且加载了很多其他页面需要，但是首页不需要的 js 文件。
请问：
- 如何提升加载速度，让 js 等文件的加载不阻塞首页显示呢？
- 如何只加载必须的文件？
图片我们都已经做了 lazy-loading, 这里想请问 js 和 css 文件如何只加载必须的文件，以及尽量让加载不阻塞页面渲染。
我们测试服务器的地址是: https://beta.scienhub.com, bundle visualizer: https://beta.scienhub.com/stats.
其中像是 monaco-editor 和 mathajax 都是和首页毫无关系的文件，但是仍然在首页加载项里。
 |
1
lucasj 2024-08-02 16:21:48 +08:00
测试服务器宽带太小了，感觉是 1M 的宽带
|
 |
2
yandif 2024-08-02 16:24:05 +08:00
我怎么感觉是你使用 VPN 进行访问的问题呢，使用 VPN 后：加载了 1 分钟，关了 VPN 后不到两秒就加载完了。
|
 |
4
sleepwalker 2024-08-02 16:32:52 +08:00
不是是部署在国外？资源加载有点慢
|
 |
5
tomjack 2024-08-02 16:54:16 +08:00
打包的时候针对资源有做分包吗？ 可以发个截图看看
还有，我这里的 gif 加载了 4s 多 |
|
6
lucasj 2024-08-02 17:00:05 +08:00
应该破案了。
原因：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 请问你的服务器部署在国内还是国外啊？ |
 |
7
Retas 2024-08-02 17:55:07 +08:00
跑一波 Lighthouse
|
 |
8
seeu2ex 2024-08-02 20:19:22 +08:00 via iPhone
我点进去超过 5 秒都没显示出来
|
 |
9
karott7 2024-08-03 00:27:11 +08:00
1. vite 配置里增加 build.rollup.output.manualChunks 配置，尽可能 node_modules 的依赖都打包到一个文件中
|
|
10
karott7 2024-08-03 00:29:54 +08:00
1. vite 配置里增加 build.rollup.output.manualChunks 配置，尽可能 node_modules 的依赖都打包到一个文件中
2. cache-control 缓存时间有点短，建议设置成一年 (public, max-age=31536000) 3. 首页用的大组件（比如 pdf ，katex ）建议封装成组件，然后动态引入，类似 react 中 suspend 的处理逻辑 |
 |
12
scienhub OP |
|
14
scienhub OP |
|
15
scienhub OP @tomjack 其实我的问题是，mathjax ，katex 这些和主页“毫无关系的”js 文件，是如何出现在主页的加载项里的。。。
|
 |
17
acthtml 2024-08-03 09:22:11 +08:00
@scienhub #12
要我优化的话，先用构建分析工具找出无用包和大体积包；其次利用配置 build.rollupOptions.output.manualChunks 将特定包拆分出去；最后利用异步加载来优化首屏速度。 |
 |
18
Charrlles 2024-08-03 10:43:05 +08:00 via iPhone
正常来说，用了 dynamic import 之后，首页不应该包含没用到的库，应该仔细检查一下组件的引入方式，一个是确保 dynamic import 是在运行时里写的，一个是看看那些非必要的库是不是被某个公共组件用到了，这个公共组件又被首页用到了
|
|
19
Charrlles 2024-08-03 10:45:54 +08:00 via iPhone
看了下你的 bundle 分析图，看起来首页和其他页面根本没分出来，是不是路由里没有用 dynamic import
|
|
20
scienhub OP @Charrlles 这是我们 router 的代码截图，除了上面的一些是 import 的，下面的 router 中每个路由都是 dynamic import 的
 |
|
21
scienhub OP @Charrlles @Charrlles 这是我们 router 的代码截图，除了上面的一些是 import 的，下面的 router 中每个路由都是 dynamic import 的
 |
1
Select Language