一、前語
前端工程領(lǐng)域最近一年出了不少新的工具，這些新工具都運用了一些新技術(shù)或者跨領(lǐng)域技術(shù)，在性能上實現(xiàn)了一些突破，為開發(fā)者帶來更快更好用的開發(fā)體驗。
二、背景
在瀏覽器支持原生 ES 模塊之前，JavaScript 并沒有提供的原生機制讓開發(fā)者以模塊化的方式進行開發(fā)。于是Webpack、Rollup等構(gòu)建式打包工具應(yīng)運而生，它們極大地改善了前端開發(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主要具有以下特點:
快速的冷啟動
即時的模塊熱更新
真正的按需編譯
四、vite相較于webpcak的優(yōu)缺點
- 優(yōu)勢
- 快速的啟動速度
Webpack 等傳統(tǒng)的構(gòu)建式打包工具，在冷啟動開發(fā)服務(wù)器時，首先都會將我們的整個代碼庫中的源代碼和node_modules進行轉(zhuǎn)換、編譯(Babel、PostCSS...)和打包，最終將打包好的文件推送到我們的瀏覽器。
vite、snowpack這類非構(gòu)建式打包工具，在冷啟動開發(fā)服務(wù)器時，無需分析模塊依賴，也不需要編譯，通過ES Module 自動向依賴的資源發(fā)出請求，因此啟動速度非常快。當(dāng)瀏覽器請求某個模塊時，再根據(jù)需要對模塊內(nèi)容進行編譯。這種按需動態(tài)編譯的方式，極大的縮減了編譯時間，項目越復(fù)雜、模塊越多，非構(gòu)建式打包工具的優(yōu)勢越明顯。
- 即時響應(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)碼進行協(xié)商緩存，而外部依賴模塊的請求則會設(shè)置為強緩存，因此一旦被緩存它們將不需要再次請求。
Vite 與
create-react-app在 Repl.it 上啟動 React 應(yīng)用程序的視頻比較：
- 缺點
- 生態(tài)
生態(tài)這一塊，Webpack 相較于 Vite 優(yōu)勢明顯，Webpcak 的社區(qū)中有非常豐富的loader和plugin，Vite這邊插件社區(qū)起步較晚，插件數(shù)量會比較少；
好在，Vite 插件開發(fā)起來非常簡單。Vite 在插件設(shè)計上擴展了 Rollup 的插件接口，開發(fā)者通過閱讀 Rollup 的插件文檔，很快就能開發(fā)出標(biāo)準(zhǔn)的 Vite 插件了。
- 打包構(gòu)建
在構(gòu)建這塊，Vite 在開發(fā)服務(wù)器與產(chǎn)品最終構(gòu)建結(jié)果沒有 Webpack 一致性強。
主要原因是我們?yōu)榱嗽谏a(chǎn)環(huán)境獲得最佳的加載性能和兼容性，還是需要將代碼進行tree-shaking、懶加載和 chunk 分割（以獲得更好的緩存），所以 Vite 選擇了 Rollup[3] 進行產(chǎn)品最終構(gòu)建打包。
五、vite在vue中的使用姿勢
Vite 將為 Vue 提供第一優(yōu)先級支持
- vue@2.x + vite：vue-cli-plugin-vite
- vue@3.x + vite: @vitejs/plugin-vue
- vue@3.x + JSX + vite: @vitejs/plugin-vue-jsx
