vite首次打开界面加载慢问题解决
寫在前面
網上都說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
配置完之后，vite的啟動也會和原來有點不同, 終端（CMD）中會多出Pre-bundling dependencies的信息
最終解決方案
上面的解決方案，確實可以解決vite慢的問題，但每個項目都要進行這么一通配置，還是比較繁瑣的，還好有開發者，寫了相應插件來避免人工寫這一堆配置
NPM: vite-plugin-optimize-persist
插件使用
npm i -D vite-plugin-optimize-persist vite-plugin-package-configvite.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首次打开界面加载慢问题解决的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 概率论排列公式和组合公式实质 压强 ：
- 下一篇： thread ,socket