一、前語

前端工程領(lǐng)域最近一年出了不少新的工具，這些新工具都運(yùn)用了一些新技術(shù)或者跨領(lǐng)域技術(shù)两曼，在性能上實現(xiàn)了一些突破，為開發(fā)者帶來更快更好用的開發(fā)體驗找颓。

二合愈、背景

在瀏覽器支持原生 ES 模塊之前，JavaScript 并沒有提供的原生機(jī)制讓開發(fā)者以模塊化的方式進(jìn)行開發(fā)击狮。于是Webpack佛析、Rollup等構(gòu)建式打包工具應(yīng)運(yùn)而生，它們極大地改善了前端開發(fā)者的開發(fā)效率彪蓬。

但隨著我們的應(yīng)用不斷迭代寸莫，我們需要處理的 JavaScript 代碼量也呈指數(shù)級增長，包含數(shù)千個模塊的大型項目相當(dāng)普遍档冬。

隨著應(yīng)用的迭代膘茎，我們開始遇到性能瓶頸 —— 使用 JavaScript 開發(fā)的工具通常需要等80s+甚至更長時間才能啟動開發(fā)服務(wù)器桃纯。

啟動開發(fā)服務(wù)器后即使使用了 HMR(Hot Module Replacement)，文件修改后的效果也需要等待幾秒鐘才能在瀏覽器中反映出來披坏。

如此循環(huán)往復(fù)态坦，遲鈍的反饋會極大地影響開發(fā)者的開發(fā)效率以及體驗。

三棒拂、關(guān)于vite

Vite[1]是一種全新的前端構(gòu)建工具伞梯。你可以把它理解為一個開箱即用的開發(fā)服務(wù)器 + 打包工具的組合，但是更輕更快帚屉。Vite 利用瀏覽器原生支持的 ES 模塊和用編譯到原生的語言開發(fā)的工具(esbuild)[2]來提供一個快速且現(xiàn)代的開發(fā)體驗谜诫。

Vite主要具有以下特點:

1. 快速的冷啟動

2. 即時的模塊熱更新

3. 真正的按需編譯

四、vite相較于webpcak的優(yōu)缺點

1. 優(yōu)勢

• 快速的啟動速度

Webpack 等傳統(tǒng)的構(gòu)建式打包工具攻旦，在冷啟動開發(fā)服務(wù)器時喻旷，首先都會將我們的整個代碼庫中的源代碼和node_modules進(jìn)行轉(zhuǎn)換、編譯(Babel牢屋、PostCSS...)和打包且预，最終將打包好的文件推送到我們的瀏覽器。

vite伟阔、snowpack這類非構(gòu)建式打包工具辣之，在冷啟動開發(fā)服務(wù)器時，無需分析模塊依賴皱炉，也不需要編譯怀估，通過ES Module 自動向依賴的資源發(fā)出請求，因此啟動速度非澈辖粒快多搀。當(dāng)瀏覽器請求某個模塊時，再根據(jù)需要對模塊內(nèi)容進(jìn)行編譯灾部。這種按需動態(tài)編譯的方式康铭，極大的縮減了編譯時間捏萍，項目越復(fù)雜若专、模塊越多，非構(gòu)建式打包工具的優(yōu)勢越明顯守屉。

image

• 即時響應(yīng)的熱更新

在 Webpack 中锁蠕，當(dāng)代碼某個依賴發(fā)生了改變夷野，webpcak 會檢查當(dāng)前的依賴關(guān)系并重新打包，當(dāng)我們的依賴關(guān)系復(fù)雜時荣倾，就算只修改一個文件悯搔，熱更新的速度也會越來越慢。在實踐中我們發(fā)現(xiàn)舌仍，即使是 HMR 妒貌，更新速度會隨著應(yīng)用規(guī)模的增長而顯著下降通危。

在 Vite 中，HMR 是在原生 ESM 上執(zhí)行的灌曙。當(dāng)編輯一個文件時菊碟，Vite 只需要精確地使已編輯的模塊與其最近的 HMR 邊界之間的鏈?zhǔn)Вù蠖鄶?shù)時候只需要模塊本身），使 HMR 更新始終快速平匈，無論應(yīng)用的大小框沟。同時 Vite 利用 HTTP 來加速整個頁面的重新加載，對于源碼模塊的請求會根據(jù) 304 狀態(tài)碼進(jìn)行協(xié)商緩存增炭，而外部依賴模塊的請求則會設(shè)置為強(qiáng)緩存，因此一旦被緩存它們將不需要再次請求拧晕。

image

image

Vite 與create-react-app在 Repl.it 上啟動 React 應(yīng)用程序的視頻比較：

video link (twitter)

2. 缺點

• 生態(tài)

生態(tài)這一塊隙姿，Webpack 相較于 Vite 優(yōu)勢明顯，Webpcak 的社區(qū)中有非常豐富的loader和plugin厂捞，Vite這邊插件社區(qū)起步較晚输玷，插件數(shù)量會比較少；

好在靡馁，Vite 插件開發(fā)起來非常簡單欲鹏。Vite 在插件設(shè)計上擴(kuò)展了 Rollup 的插件接口，開發(fā)者通過閱讀 Rollup 的插件文檔臭墨，很快就能開發(fā)出標(biāo)準(zhǔn)的 Vite 插件了赔嚎。

• 打包構(gòu)建

在構(gòu)建這塊，Vite 在開發(fā)服務(wù)器與產(chǎn)品最終構(gòu)建結(jié)果沒有 Webpack 一致性強(qiáng)胧弛。

主要原因是我們?yōu)榱嗽谏a(chǎn)環(huán)境獲得最佳的加載性能和兼容性尤误，還是需要將代碼進(jìn)行tree-shaking、懶加載和 chunk 分割（以獲得更好的緩存）结缚，所以 Vite 選擇了 Rollup[3] 進(jìn)行產(chǎn)品最終構(gòu)建打包损晤。

五、vite在vue中的使用姿勢

Vite 將為 Vue 提供第一優(yōu)先級支持

1. vue@2.x + vite：vue-cli-plugin-vite
2. vue@3.x + vite: @vitejs/plugin-vue
3. vue@3.x + JSX + vite: @vitejs/plugin-vue-jsx

六红竭、標(biāo)注

1. vite
2. esbuild
3. rollup
4. awesome-vite
5. video link (twitter)