vite首次打开界面加载慢问题解决
寫在前面
網(wǎng)上都說(shuō)vite要比webpack快，但個(gè)人感受，默認(rèn)情況下, vite項(xiàng)目的啟動(dòng)確實(shí)比webpack快，但如果某個(gè)界面是首次進(jìn)入，且依賴比較多/比較復(fù)雜的話，那就會(huì)比較慢了。
這篇文章就是用來(lái)記錄，關(guān)于vite慢的相關(guān)問(wèn)題與可能的解決方案
為什么說(shuō)vite快？為什么說(shuō)vite慢？
只說(shuō)vite快那太過(guò)籠統(tǒng)，但vite項(xiàng)目的啟動(dòng)確實(shí)是快（注意這里的啟動(dòng)是指命令行啟動(dòng)完畢，不是指啟動(dòng)完之后首頁(yè)加載完畢）
啟動(dòng)完之后，你打開(kāi)首頁(yè)，你可能就不一定覺(jué)得vite快了（我之前就時(shí)常在自我懷疑，是不是我vite的打開(kāi)方式不對(duì)，怎么這么慢？？？？），如果依賴的資源比較多，那速度有時(shí)慢的感人
可以簡(jiǎn)單的認(rèn)為，vite之所以啟動(dòng)快，是因?yàn)関ite啟動(dòng)時(shí)并不會(huì)像webpack一樣對(duì)所有代碼進(jìn)行編譯/打包/壓縮, 他只會(huì)對(duì)一小部分代碼進(jìn)行一些簡(jiǎn)單的處理，剩余的工作都交給瀏覽器，以及運(yùn)行時(shí)進(jìn)行依賴分析，動(dòng)態(tài)打包，動(dòng)態(tài)引入
具體原因/原理可見(jiàn)：vite原理與實(shí)踐記錄
對(duì)vite慢的分析與嘗試解決
vite啟動(dòng)快的原理，也導(dǎo)致了他在加載依賴項(xiàng)很多，很復(fù)雜的頁(yè)面時(shí)，頁(yè)面打開(kāi)慢。因?yàn)樗M(jìn)行一系列的動(dòng)態(tài)分析/動(dòng)態(tài)資源引入/動(dòng)態(tài)編譯。
vite慢的表現(xiàn)
vite的慢的時(shí)候，會(huì)有什么表現(xiàn)呢？
- 從web開(kāi)發(fā)者工具的network選項(xiàng)卡中，會(huì)看到請(qǐng)求了很多資源
- 終端(CMD)中也會(huì)顯示, 類似這樣的文字：
- [vite] new dependencies found: axios, updating...
- [vite] ? dependencies updated, reloading page...
- 界面會(huì)被強(qiáng)制刷新一次
表現(xiàn)如下圖
如下兩篇文章也是對(duì)vite慢的記錄，以及一定的分析：
vite首次啟動(dòng)加載慢
Vite 解決項(xiàng)目刷新慢問(wèn)題
對(duì)于vite慢有沒(méi)有解決辦法？
慢的主要原因是vite需要?jiǎng)討B(tài)的解析依賴，并打包，引入。其中打包又可能是慢中之慢。
可能的原因找到了，那就看vite官方有沒(méi)有提及解決辦法，還好官方文檔中有提及這個(gè)，只是寫的不詳細(xì)：VITE官網(wǎng)：依賴優(yōu)化選項(xiàng)
解決方案
總之就是通過(guò)添加類似如下的配置，讓vite在啟動(dòng)之初就對(duì)某些資源進(jìn)行預(yù)打包，盡量避免后續(xù)的動(dòng)態(tài)打包，示例配置如下
vite.config.ts
配置完之后，vite的啟動(dòng)也會(huì)和原來(lái)有點(diǎn)不同, 終端（CMD）中會(huì)多出Pre-bundling dependencies的信息
最終解決方案
上面的解決方案，確實(shí)可以解決vite慢的問(wèn)題，但每個(gè)項(xiàng)目都要進(jìn)行這么一通配置，還是比較繁瑣的，還好有開(kāi)發(fā)者，寫了相應(yīng)插件來(lái)避免人工寫這一堆配置
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()] }注意： 首次加載的時(shí)候，依然會(huì)很慢，這個(gè)是正常現(xiàn)象，因?yàn)檫@個(gè)插件, 加快vite載入界面速度的原理, 也和上面說(shuō)的一樣，而第一次，這個(gè)插件也沒(méi)法知道，哪些依賴需要預(yù)構(gòu)建，他只是在vite動(dòng)態(tài)引入資源的時(shí)候，將這些資源都記錄下來(lái)，自動(dòng)寫入了package.json中，當(dāng)再次啟動(dòng)項(xiàng)目的時(shí)候，插件會(huì)讀取之前他寫入在package.json中的數(shù)據(jù)，并告知vite，這樣vite就能對(duì)這些資源進(jìn)行預(yù)構(gòu)建了，也就能加快進(jìn)入界面的速度了，但相應(yīng)的啟動(dòng)速度就會(huì)比原來(lái)稍微慢一點(diǎn)
package.json
看到這里你可能會(huì)想，vite第二次啟動(dòng)本來(lái)就有緩存，本來(lái)就快，那這個(gè)插件豈不是沒(méi)有意義了？當(dāng)然還是有意義的，如果在這之后，被人再拿到你的源代碼，因?yàn)閜ackage.json中已經(jīng)有了預(yù)構(gòu)建配置了，所以，他的vite在第一次啟動(dòng)時(shí)，就能對(duì)資源進(jìn)行預(yù)構(gòu)建了，另外，如果你由于某些原因需要?jiǎng)h除node_modules/.vite這個(gè)緩存目錄, 由于有這個(gè)插件，你的這次首次啟動(dòng)也會(huì)快起來(lái)。
參考文章
vite首次啟動(dòng)加載慢
Vite 解決項(xiàng)目刷新慢問(wèn)題
VITE官網(wǎng)：依賴優(yōu)化選項(xiàng)
vite原理與實(shí)踐記錄
幾個(gè)插件，讓你的Vue代碼 “學(xué)會(huì)” 自動(dòng)按需引入
總結(jié)
以上是生活随笔為你收集整理的vite首次打开界面加载慢问题解决的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 概率论排列公式和组合公式实质 压强 ：
- 下一篇： thread ,socket