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

[scienhub]

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

请问：

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

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

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

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

[lucasj]

测试服务器宽带太小了，感觉是 1M 的宽带

[yandif]

我怎么感觉是你使用 VPN 进行访问的问题呢，使用 VPN 后：加载了 1 分钟，关了 VPN 后不到两秒就加载完了。

[scienhub]

@yandif 我没有用 vpn 诶？

[sleepwalker]

不是是部署在国外？资源加载有点慢

[tomjack]

打包的时候针对资源有做分包吗？ 可以发个截图看看

还有，我这里的 gif 加载了 4s 多

[lucasj]

应该破案了。

原因：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]

跑一波 Lighthouse

[seeu2ex]

我点进去超过 5 秒都没显示出来

[karott7]

1. vite 配置里增加 build.rollup.output.manualChunks 配置，尽可能 node_modules 的依赖都打包到一个文件中

[karott7]

1. vite 配置里增加 build.rollup.output.manualChunks 配置，尽可能 node_modules 的依赖都打包到一个文件中
2. cache-control 缓存时间有点短，建议设置成一年 (public, max-age=31536000)
3. 首页用的大组件（比如 pdf ，katex ）建议封装成组件，然后动态引入，类似 react 中 suspend 的处理逻辑

[scienhub]

@karott7

[scienhub]

@karott7
1. 这个我们已经做了
2. cf 的缓存会设置的更长些。
3. 我问题的关键就是，pdf ，katex 这些和主页“没有任何关系”，是其它页面用的。但不知为何会在主页的加载项里。

[scienhub]

@lucasj 服务器在我家中，国外的宽带。

[scienhub]

@tomjack
是指 build 后的 js 文件列表么？太长了粘贴不下，不过我感觉 https://beta.scienhub.com/stats 这里是能看到 bundle size 的呀？

[scienhub]

@tomjack 其实我的问题是，mathjax ，katex 这些和主页“毫无关系的”js 文件，是如何出现在主页的加载项里的。。。

[acthtml]

@scienhub #12

对于 3 ），因为这些类库“在其他页面是公共类库”。

[acthtml]

@scienhub #12

要我优化的话，先用构建分析工具找出无用包和大体积包；其次利用配置 build.rollupOptions.output.manualChunks 将特定包拆分出去；最后利用异步加载来优化首屏速度。

[Charrlles]

正常来说，用了 dynamic import 之后，首页不应该包含没用到的库，应该仔细检查一下组件的引入方式，一个是确保 dynamic import 是在运行时里写的，一个是看看那些非必要的库是不是被某个公共组件用到了，这个公共组件又被首页用到了

[Charrlles]

看了下你的 bundle 分析图，看起来首页和其他页面根本没分出来，是不是路由里没有用 dynamic import

[scienhub]

@Charrlles 这是我们 router 的代码截图，除了上面的一些是 import 的，下面的 router 中每个路由都是 dynamic import 的


[scienhub]

@Charrlles @Charrlles 这是我们 router 的代码截图，除了上面的一些是 import 的，下面的 router 中每个路由都是 dynamic import 的


[scienhub]

@Charrlles 破案了，就是最上面几个 import ，改为 dynamic import 就解决了。
十分感谢！！