處理Vite項目首屏加載響應遲緩和二次刷新的問題

由於Vite採用的bundless的dev server方案,且按原生ESM的形式按需爲瀏覽器動態提供源碼,也就形成了Vite冷啓動迅速,但首屏加載遲緩(加載過程中進行解析、編譯等)的問題。

另外,在第一次啓動時,如果在首頁通過點擊等交互操作準備進入到下一個包含新類庫依賴的頁面時,會出現響應遲緩、頁面reload的情況。同樣出現這類情況也是因爲需要動態加載過程中的額外工作。

目前,對於上述問題的解決方案主要是通過觸發冷啓動時的預構建來解決:

1. 通過配置依賴優化項 optimizeDeps.include

2. 通過現有的npm包

npm i -D vite-plugin-optimize-persist vite-plugin-package-config
// vite.config.ts
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'

export default {
  plugins: [
    PkgConfig(),
    OptimizationPersist()
  ]
}

3. 如果方案2有兼容問題,可以參考其源碼,自己編寫插件的實現

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章