这是一个创建于 433 天前的主题，其中的信息可能已经有所发展或是发生改变。
我们项目前端是用的 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