寫在前面

網上都說vite要比webpack快，但個人感受，默認情況下, vite項目的啟動確實比webpack快，但如果某個界面是首次進入，且依賴比較多/比較復雜的話，那就會比較慢了。

這篇文章就是用來記錄，關于vite慢的相關問題與可能的解決方案

為什么說vite快？為什么說vite慢？

只說vite快那太過籠統，但vite項目的啟動確實是快（注意這里的啟動是指命令行啟動完畢，不是指啟動完之后首頁加載完畢）

啟動完之后，你打開首頁，你可能就不一定覺得vite快了（我之前就時常在自我懷疑，是不是我vite的打開方式不對，怎么這么慢？？？？），如果依賴的資源比較多，那速度有時慢的感人

可以簡單的認為，vite之所以啟動快，是因為vite啟動時并不會像webpack一樣對所有代碼進行編譯/打包/壓縮, 他只會對一小部分代碼進行一些簡單的處理，剩余的工作都交給瀏覽器，以及運行時進行依賴分析，動態打包，動態引入

具體原因/原理可見：vite原理與實踐記錄

對vite慢的分析與嘗試解決

vite啟動快的原理，也導致了他在加載依賴項很多，很復雜的頁面時，頁面打開慢。因為他要進行一系列的動態分析/動態資源引入/動態編譯。

vite慢的表現

vite的慢的時候，會有什么表現呢？

• 從web開發者工具的network選項卡中，會看到請求了很多資源
• 終端(CMD)中也會顯示, 類似這樣的文字：
  • [vite] new dependencies found: axios, updating...
  • [vite] ? dependencies updated, reloading page...
• 界面會被強制刷新一次

表現如下圖

如下兩篇文章也是對vite慢的記錄，以及一定的分析：
vite首次啟動加載慢
Vite 解決項目刷新慢問題

對于vite慢有沒有解決辦法？

慢的主要原因是vite需要動態的解析依賴，并打包，引入。其中打包又可能是慢中之慢。

可能的原因找到了，那就看vite官方有沒有提及解決辦法，還好官方文檔中有提及這個，只是寫的不詳細：VITE官網：依賴優化選項

解決方案

總之就是通過添加類似如下的配置，讓vite在啟動之初就對某些資源進行預打包，盡量避免后續的動態打包，示例配置如下
vite.config.ts

{optimizeDeps: {include: ['vue','map-factory','element-plus/es','element-plus/es/components/form/style/index','element-plus/es/components/radio-group/style/index','element-plus/es/components/radio/style/index','element-plus/es/components/checkbox/style/index','element-plus/es/components/checkbox-group/style/index','element-plus/es/components/switch/style/index','element-plus/es/components/time-picker/style/index','element-plus/es/components/date-picker/style/index','element-plus/es/components/col/style/index','element-plus/es/components/form-item/style/index','element-plus/es/components/alert/style/index','element-plus/es/components/breadcrumb/style/index','element-plus/es/components/select/style/index','element-plus/es/components/input/style/index','element-plus/es/components/breadcrumb-item/style/index','element-plus/es/components/tag/style/index','element-plus/es/components/pagination/style/index','element-plus/es/components/table/style/index','element-plus/es/components/table-column/style/index','element-plus/es/components/card/style/index','element-plus/es/components/row/style/index','element-plus/es/components/button/style/index','element-plus/es/components/menu/style/index','element-plus/es/components/sub-menu/style/index','element-plus/es/components/menu-item/style/index','element-plus/es/components/option/style/index','@element-plus/icons-vue','pinia','axios','vue-request','vue-router','@vueuse/core',],} }

配置完之后，vite的啟動也會和原來有點不同, 終端（CMD）中會多出Pre-bundling dependencies的信息

最終解決方案

上面的解決方案，確實可以解決vite慢的問題，但每個項目都要進行這么一通配置，還是比較繁瑣的，還好有開發者，寫了相應插件來避免人工寫這一堆配置

NPM: vite-plugin-optimize-persist

插件使用

npm i -D vite-plugin-optimize-persist vite-plugin-package-config

vite.config.ts 中增加配置

// vite.config.ts import OptimizationPersist from 'vite-plugin-optimize-persist' import PkgConfig from 'vite-plugin-package-config'export default {plugins: [PkgConfig(),OptimizationPersist()] }

注意： 首次加載的時候，依然會很慢，這個是正常現象，因為這個插件, 加快vite載入界面速度的原理, 也和上面說的一樣，而第一次，這個插件也沒法知道，哪些依賴需要預構建，他只是在vite動態引入資源的時候，將這些資源都記錄下來，自動寫入了package.json中，當再次啟動項目的時候，插件會讀取之前他寫入在package.json中的數據，并告知vite，這樣vite就能對這些資源進行預構建了，也就能加快進入界面的速度了，但相應的啟動速度就會比原來稍微慢一點

package.json

看到這里你可能會想，vite第二次啟動本來就有緩存，本來就快，那這個插件豈不是沒有意義了？當然還是有意義的，如果在這之后，被人再拿到你的源代碼，因為package.json中已經有了預構建配置了，所以，他的vite在第一次啟動時，就能對資源進行預構建了，另外，如果你由于某些原因需要刪除node_modules/.vite這個緩存目錄, 由于有這個插件，你的這次首次啟動也會快起來。

參考文章

vite首次啟動加載慢
Vite 解決項目刷新慢問題
VITE官網：依賴優化選項
vite原理與實踐記錄
幾個插件，讓你的Vue代碼 “學會” 自動按需引入

總結

以上是生活随笔為你收集整理的vite首次打开界面加载慢问题解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。