一、首先來個 Vite 的通用簡介

Vite 是一種新型前端構(gòu)建工具，在我們保險前端項目中已經(jīng)推動并應(yīng)用很久了，Vite 能夠顯著降低構(gòu)建時間，提升前端開發(fā)效率。

它主要由兩部分組成：

• 一個開發(fā)服務(wù)器，它基于 原生 ES 模塊 提供了 豐富的內(nèi)建功能，如速度快到驚人的 模塊熱更新（HMR）
• 一套構(gòu)建指令，它使用 Rollup 打包你的代碼，并且它是預(yù)配置的，可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過的靜態(tài)資源

Vite 還提供了強大的擴展性，可通過其 插件 API 和 JavaScript API 進行擴展，并提供完整的類型支持。

二、Vite 的優(yōu)勢，為什么使用 Vite ？

當(dāng)我們開始構(gòu)建越來越大型的應(yīng)用時，需要處理的 JavaScript 代碼量也呈指數(shù)級增長。包含數(shù)千個模塊的大型項目相當(dāng)普遍?；?JavaScript 開發(fā)的工具就會開始遇到性能瓶頸：通常需要很長時間（甚至是幾分鐘?。┎拍軉娱_發(fā)服務(wù)器，即使使用模塊熱替換（HMR），文件修改后的效果也需要幾秒鐘才能在瀏覽器中反映出來。如此循環(huán)往復(fù)，嚴重影響開發(fā)人員的效率。

當(dāng)冷啟動開發(fā)服務(wù)器時，基于打包器的方式啟動必須優(yōu)先抓取并構(gòu)建你的整個應(yīng)用，然后才能提供服務(wù)，如果項目很大，導(dǎo)致的一個必然結(jié)果就是，服務(wù)啟動很慢，熱更新很慢，效率降低。Vite 只需要在瀏覽器請求源碼時進行轉(zhuǎn)換并按需提供源碼。根據(jù)情景動態(tài)導(dǎo)入代碼，即只在當(dāng)前屏幕上實際使用時才會被處理，節(jié)省啟動及更新時間。

如下圖是新舊項目啟動時長對比，Vite 啟動速度，快了 30 多倍；

常規(guī)的通過 webpack 啟動的服務(wù)，基于打包器啟動，整個重新構(gòu)建，即使將構(gòu)建內(nèi)容放到緩存中，更新速度也會隨著應(yīng)用體積增長而直線下降：

Vite 在原生 ESM 基礎(chǔ)上執(zhí)行 HMR，Vite 只需要精確地使已編輯的模塊與其最近的 HMR 邊界之間的鏈失活（大多數(shù)時候只是模塊本身），使得無論應(yīng)用大小如何，HMR 始終能保持快速更新：

三、Vite 為我們開發(fā)提升了很大的效率，但是也會有一些小問題

1、使用 Vite + Vue3 +Element-plus 或者其他 UI 庫，按需加載使用時，多人開發(fā)，每人頁面重新 reload 了嗎??？

2、低版本 Vite（2.9以下）配置 Preview 的 proxy 時，是不是不生效??？

3、低版本 Vite 配合 unocss 設(shè)置樣式后，是不是熱更新不生效??？

4、部分依賴包，使用京東鏡像，是不是無法下載??？

如果你遇到了以上問題，那這邊文章可以幫助你解決困惑！

四、解決頁面 reload 問題：高低版本 Vite 解決方法不同

• 原因：UI 庫配置按需加載，點擊跳轉(zhuǎn)新頁面，導(dǎo)致重新 reload 頁面
• 情況：高低版本 Vite 解決頁面 reload 方法不同

問題現(xiàn)象如下，上方圖片頁面會 reload，會有一段時間白屏，下方圖片中文件 preload：

1、Vite 低版本（v2.9以下）頁面 reload 解決方法；

• 解決方法：提前進行依賴包的預(yù)加載，可通過如下兩種方法配置，推薦方法b（因為低版本有現(xiàn)成插件）；
• 通過這些配置，就能夠使頁面 reload 在多人開發(fā)時只進行一次。

注意事項（低版本 Vite 的 bug，高版本已經(jīng)修復(fù)）：

• 使用 unocss 時，熱更新會失效，需要手動刷新頁面，如果不使用 unocss 影響不大

方法a、通過手動配置 vite.config.ts 文件的 optimizeDeps 選項；

// vite.config.js
{
    ...
    optimizeDeps: {
        include: [
            'vue',
            'vue-router',
            'pinia',
            '@element-plus/icons-vue',
            'driver.js',
            'element-plus',
            'element-plus/es',
            'element-plus/es/components/alert/style/index',
            'element-plus/es/components/badge/style/index',
            'element-plus/es/components/breadcrumb-item/style/index',
            'element-plus/es/components/breadcrumb/style/index',
            'element-plus/es/components/button/style/index',
            'element-plus/es/components/card/style/index'
            ...
        ]
    }
}

方法b、使用現(xiàn)成的插件 vite-plugin-optimize-persist、vite-plugin-package-config （推薦原因： 自動會生成預(yù)加載配置文件 optimizeDeps），通用配置如下：

??遺憾的是高版本（v2.9及以上失效）配置無效，有興趣的話，可以試著修改下源碼。

// vite.config.ts
// 兩個插件組合使用，會自動生成 optimizeDeps 配置，默認生成到 package.json 文件中，可通過 PkgConfig() 修改生成目錄
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'

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

2、Vite 高版本（v4+）頁面 reload 解決方法：

• 解決方法：上述兩個插件已被棄用，只能自己配置 optimizeDeps 選項，提前進行依賴包的預(yù)加載；

全量配置案例如下，備注：如果項目中使用，根據(jù)項目需要進行相應(yīng)依賴包的配置，否則會出現(xiàn)首屏加載過慢的問題，類似我們常規(guī)使用的 webpack 一樣；

// vite.config.js

{
    ...
    optimizeDeps：{
         include: [
            '@element-plus/icons-vue',
            '@tinymce/tinymce-vue',
            '@vueuse/core',
            '@vueuse/shared',
            'axios',
            'clipboard',
            'codemirror',
            'codemirror/addon/lint/json-lint',
            'codemirror/addon/lint/lint',
            'codemirror/mode/css/css',
            'codemirror/mode/htmlmixed/htmlmixed',
            'codemirror/mode/javascript/javascript',
            'driver.js',
            'element-plus',
            'element-plus/es',
            'element-plus/es/components/alert/style/index',
            'element-plus/es/components/badge/style/index',
            'element-plus/es/components/breadcrumb-item/style/index',
            'element-plus/es/components/breadcrumb/style/index',
            'element-plus/es/components/button/style/index',
            'element-plus/es/components/card/style/index',
            'element-plus/es/components/cascader/style/index',
            'element-plus/es/components/check-tag/style/index',
            'element-plus/es/components/checkbox-group/style/index',
            'element-plus/es/components/checkbox/style/index',
            'element-plus/es/components/col/style/index',
            'element-plus/es/components/color-picker/style/index',
            'element-plus/es/components/config-provider/style/index',
            'element-plus/es/components/date-picker/style/index',
            'element-plus/es/components/dialog/style/index',
            'element-plus/es/components/divider/style/index',
            'element-plus/es/components/drawer/style/index',
            'element-plus/es/components/dropdown-item/style/index',
            'element-plus/es/components/dropdown-menu/style/index',
            'element-plus/es/components/dropdown/style/index',
            'element-plus/es/components/empty/style/index',
            'element-plus/es/components/form-item/style/index',
            'element-plus/es/components/form/style/index',
            'element-plus/es/components/icon/style/index',
            'element-plus/es/components/input-number/style/index',
            'element-plus/es/components/input/style/index',
            'element-plus/es/components/link/style/index',
            'element-plus/es/components/loading/style/index',
            'element-plus/es/components/menu-item/style/index',
            'element-plus/es/components/menu/style/index',
            'element-plus/es/components/message-box/style/index',
            'element-plus/es/components/message/style/index',
            'element-plus/es/components/notification/style/index',
            'element-plus/es/components/option/style/index',
            'element-plus/es/components/pagination/style/index',
            'element-plus/es/components/popover/style/index',
            'element-plus/es/components/progress/style/index',
            'element-plus/es/components/radio-group/style/index',
            'element-plus/es/components/radio/style/index',
            'element-plus/es/components/row/style/index',
            'element-plus/es/components/scrollbar/style/index',
            'element-plus/es/components/select/style/index',
            'element-plus/es/components/space/style/index',
            'element-plus/es/components/step/style/index',
            'element-plus/es/components/steps/style/index',
            'element-plus/es/components/sub-menu/style/index',
            'element-plus/es/components/switch/style/index',
            'element-plus/es/components/tab-pane/style/index',
            'element-plus/es/components/table-column/style/index',
            'element-plus/es/components/table/style/index',
            'element-plus/es/components/tabs/style/index',
            'element-plus/es/components/tag/style/index',
            'element-plus/es/components/timeline-item/style/index',
            'element-plus/es/components/timeline/style/index',
            'element-plus/es/components/tooltip/style/index',
            'element-plus/es/components/transfer/style/index',
            'element-plus/es/components/upload/style/index',
            'element-plus/es/components/popconfirm/style/index',
            'element-plus/es/components/backtop/style/index',
            'element-plus/es/components/affix/style/index',
            'element-plus/es/components/statistic/style/index',
            'element-plus/es/components/tree/style/index',
            'element-plus/es/components/tree-v2/style/index',
            'element-plus/es/components/tree-select/style/index',
            'element-plus/es/components/table-v2/style/index',
            'element-plus/es/components/skeleton/style/index',
            'element-plus/es/components/skeleton-item/style/index',
            'element-plus/es/components/collapse/style/index',
            'element-plus/es/components/collapse-item/style/index',
            'element-plus/es/components/collapse-transition/style/index',
            'element-plus/es/components/carousel/style/index',
            'element-plus/es/components/carousel-item/style/index',
            'element-plus/es/components/calendar/style/index',
            'element-plus/es/components/badge/style/index',
            'element-plus/es/components/avatar/style/index',
            'element-plus/es/components/aside/style/index',
            'element-plus/es/locale/lang/zh-cn',
            'fuse.js',
            'js-base64',
            'js-cookie',
            'js-file-download',
            'nprogress',
            'pako',
            'path-browserify',
            'path-to-regexp',
            'pinia',
            'prismjs',
            'qs',
            'screenfull',
            'sortablejs',
            'vue',
            'vue-json-pretty',
            'vue-router',
            'vuedraggable' 
         ]
    }
}

五、解決 Vite 低版本（v2.9以下），preview 配置 proxy 不生效：

問題原因：低版本 Vite 的執(zhí)行 preview 預(yù)覽時，使用的 proxy 是 server 中的 proxy 配置，官方文檔中提供的 preview 的 proxy 無效，這是低版本 Vite 的一個 bug，高版本已經(jīng)修復(fù)，github 上有相關(guān)的 issue，也可以通過源碼查看。

解決辦法：

1. 在 vite.config.js 使用 server 中的 proxy 代替

2. 使用 switchhost 進行代理配置

六、解決 Vite 低版本（v2.9以下），unocss 熱更新失效：

1. 解決方法a：升級 Vite，從根本解決問題，以后項目升級比較方便，各種小問題容易規(guī)避，推薦升級

2. 解決方法b：降低 unocss 的版本，可能會出現(xiàn)各種其他問題，不建議

針對這個問題，作者沒有降低 unocss 的版本，直接進行 Vite 升級，如果使用 unocss 強烈建議進行 Vite 升級；

不升級后期如果使用其他的依賴包，可能也會有各種其他問題出現(xiàn)

七、解決升級 Vite 項目后，部分依賴包，使用京東鏡像無法下載：

產(chǎn)生原因：各種依賴包之間互相依賴，京東鏡像的 npm 包可能有問題；

解決方法：非京東私有依賴包，使用 npm 官方鏡像下載，京東私有鏡像使用京東鏡像，初始化項目，生成 package-lock.json 文件，多人合作時，以 package-lock.json 文件為主。

總結(jié)：Vite 幫助我們提升開發(fā)效率，但是區(qū)分 Vite 是否需要使用最新版本，還是需要作為考慮依據(jù)：

如果你的項目不使用 unocss，同時對于 preview 下的 proxy 沒有特殊要求，那么 Vite2.8.6 + Vue3 + elementPlus 可自動生成預(yù)加載文件，省時省力，開發(fā)體驗好，強烈推薦；如果你的項目使用 unocss 或者對于 preview 下的 proxy 有特殊需求，強烈建議使用最新版本的 Vite，可通過手動配置 optimizeDeps 解決頁面刷新的問題。

作者：京東保險 王升升

來源：京東云開發(fā)者社區(qū) 轉(zhuǎn)載請注明來源文章來源地址http://www.zghlxwxcb.cn/news/detail-748864.html

到了這里，關(guān)于帶你玩轉(zhuǎn) Vite + Vue3 高低版本常用玩法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！