Vite页面加载缓慢怎么办？问题及解决方案详解

Vite页面加载缓慢：解决方案

问题概述

在使用Vite进行开发时，我遇到了一个奇怪的问题，导致页面在首次加载时异常缓慢，需要长达4分钟。 subsequent requests却很快，这让我感到困惑。代码没有改变，即使回退到上周的提交，问题仍然存在。环境中的某些变化似乎引起了这个问题，尽管我已经撤销了所有更改。

分析和调查

系统负载、内存和CPU使用率都很低，表明这不是资源限制问题。尝试了Node 14和Node 20，结果都是一样的。构建项目用于生产时，构建时间不到1分钟，网站运行速度也很好。

检查npm run dev的日志，我发现加载某些组件需要很长时间：

 vite:hmr [self-accepts] resources/js/Pages/Admin/Import/Index.vue +8s
  vite:import-analysis 17.40ms [15 imports rewritten] resources/js/Pages/Admin/Import/Index.vue +31s
  vite:transform 120.29ms /resources/js/Pages/Admin/Import/Index.vue +31s
  vite:time 11903.08ms /resources/js/Pages/Admin/Import/Index.vue +31s
  vite:cache [memory] /node_modules/.vite/deps/@inertiajs_vue3.js?v=0e978822 +31s

  vite:load 11695.47ms [fs] /resources/js/Pages/Admin/Category/Index.vue +2m
  vite:hmr [self-accepts] resources/js/Pages/Admin/Category/Index.vue +6s
  vite:import-analysis 17.36ms [14 imports rewritten] resources/js/Pages/Admin/Category/Index.vue +2m
  vite:transform 66.00ms /resources/js/Pages/Admin/Category/Index.vue +2m
  vite:time 11768.75ms /resources/js/Pages/Admin/Category/Index.vue +2m
  vite:cache [memory] /node_modules/.vite/deps/@inertiajs_vue3.js?v=0e978822 +2m

初始加载时间为7到10秒，这是可以接受的。但是，正如前面提到的，组件是第一次加载的，花了数分钟。

解决方案

如果从vite.config.js中禁用HMR，它将快速运行。这表明问题出在HMR尝试加载组件的时候。

结论

这个问题是由HMR引起的，禁用HMR可以解决问题。但是，在开发过程中禁用HMR是不行的。下一步是调查为什么HMR会导致加载缓慢，并找到一种方法来解决这个问题，同时保留HMR。

常见问题解答

1. 我在开发环境中禁用HMR会发生什么？

禁用HMR意味着你在保存代码时页面不会自动重新加载。你需要手动刷新页面来查看更改。

2. 这个问题只出现在我的机器上吗？

不确定。这个问题可能是特定于我的机器或配置的。其他人可能没有遇到同样的问题。

3. 是否有办法在不禁用HMR的情况下解决这个问题？

是的，有几种方法可以尝试解决这个问题，而无需禁用HMR。一种方法是使用不同的浏览器或清理浏览器缓存。

4. 为什么HMR会导致加载缓慢？

HMR在热重载组件时会执行很多操作。如果组件很大或复杂，这可能会导致加载缓慢。

5. 还有其他方法可以解决这个问题吗？

除了禁用HMR和使用不同的浏览器之外，你还可以尝试以下方法：

• 减少组件的大小和复杂性。
• 使用懒加载来延迟加载非必要的组件。
• 使用代码拆分来将应用程序拆分为更小的块。