Vite 是 vue的作者尤雨溪開發(fā)的打包工具，目前亮點(diǎn)是本地開發(fā)時(shí)熱加載編譯極快，在大型項(xiàng)目中體驗(yàn)較好。

貼一下作者微博原話：

Vite，一個(gè)基于瀏覽器原生 ES imports 的開發(fā)服務(wù)器。利用瀏覽器去解析 imports，在服務(wù)器端按需編譯返回，完全跳過了打包這個(gè)概念，服務(wù)器隨起隨用。同時(shí)不僅有 Vue 文件支持，還搞定了熱更新，而且熱更新的速度不會(huì)隨著模塊增多而變慢。針對(duì)生產(chǎn)環(huán)境則可以把同一份代碼用 rollup 打包。雖然現(xiàn)在還比較粗糙，但這個(gè)方向我覺得是有潛力的，做得好可以徹底解決改一行代碼等半天熱更新的問題。

從上面可以看出：

• Vite 主要對(duì)應(yīng)的場(chǎng)景是開發(fā)模式，跳過打包按需加載，因此熱更新的速度非?？?；

• 在大型項(xiàng)目上可以有效提高本地開發(fā)編譯打包的速度，解決 “改一行代碼等半天” 問題；

• 瀏覽器解析 imports，利用了 type=“module” 功能，然后攔截瀏覽器發(fā)出的 ES imports 請(qǐng)求并做相應(yīng)處理；

• 生產(chǎn)模式是用 rollup 打包，這里后續(xù)應(yīng)該會(huì)做優(yōu)化；

一、現(xiàn)代瀏覽器的模塊功能

將script標(biāo)簽的type屬性設(shè)置為module，那么在js中就可以使用模塊功能(import '**.js')，es6兼容性為IE11及以下不支持，從 Vue3 的 proxy 和 Vite 的模塊，可以看出尤大是徹底放棄 IE 了。

二、攔截http請(qǐng)求

針對(duì)不同類型的文件做不同的處理

1. js文件 用 es-module-lexer 來(lái)對(duì) js 進(jìn)行的語(yǔ)法分析獲取 imports 數(shù)組（依賴分析），然后將import語(yǔ)法替換為請(qǐng)求對(duì)應(yīng)的js文件。

原代碼：

轉(zhuǎn)換后：

2. vue文件

vue單文件組件包含的三個(gè)部分 template、script、style, Vite 會(huì)將單文件組件分成三個(gè)部分分別請(qǐng)求，以及做相應(yīng)處理。

2.1 template

Vite 將 template 編譯成 render 函數(shù)后返回。

2.2 script

分析 js 中的 import 依賴，重新發(fā)起請(qǐng)求。

2.3 style

將 style 編譯成 css 插入head中。原本的 App.vue 文件是：

轉(zhuǎn)換后變成了：

三、熱更新

Vite 的是通過 WebSocket 來(lái)實(shí)現(xiàn)熱更新通信，當(dāng)代碼改動(dòng)以后，通過 websocket 僅向?yàn)g覽器推送改動(dòng)的文件。因此 Vite 本地?zé)岣碌乃俣炔粫?huì)受項(xiàng)目的大小影響太多，在大型項(xiàng)目中本地開發(fā)速度快。Vite 的客戶端熱更新代碼是在 app.vue 文件編譯過程中，將代碼注入進(jìn)去的。

四、Vite 和 vue-cli 的優(yōu)缺點(diǎn)對(duì)比

五、小結(jié) 目前 Vite 正在以很快的速度迭代著，優(yōu)化自身的功能，未來(lái)可期。

>原文:https://juejin.cn/post/6928175048163491848