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

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

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

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


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

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

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

@scienhub #12

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

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

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

跑一波 Lighthouse

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

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

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

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

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