一、前語
前端工程領域最近一年出了不少新的工具，這些新工具都運用了一些新技術或者跨領域技術，在性能上實現了一些突破，為開發者帶來更快更好用的開發體驗。
二、背景
在瀏覽器支持原生 ES 模塊之前，JavaScript 并沒有提供的原生機制讓開發者以模塊化的方式進行開發。于是Webpack、Rollup等構建式打包工具應運而生，它們極大地改善了前端開發者的開發效率。
但隨著我們的應用不斷迭代，我們需要處理的 JavaScript 代碼量也呈指數級增長，包含數千個模塊的大型項目相當普遍。
隨著應用的迭代，我們開始遇到性能瓶頸 —— 使用 JavaScript 開發的工具通常需要等80s+甚至更長時間才能啟動開發服務器。
啟動開發服務器后即使使用了 HMR(Hot Module Replacement)，文件修改后的效果也需要等待幾秒鐘才能在瀏覽器中反映出來。
如此循環往復，遲鈍的反饋會極大地影響開發者的開發效率以及體驗。
三、關于vite
Vite[1]是一種全新的前端構建工具。你可以把它理解為一個開箱即用的開發服務器 + 打包工具的組合，但是更輕更快。Vite 利用瀏覽器原生支持的 ES 模塊和用編譯到原生的語言開發的工具(esbuild)[2]來提供一個快速且現代的開發體驗。
Vite主要具有以下特點:
快速的冷啟動
即時的模塊熱更新
真正的按需編譯
四、vite相較于webpcak的優缺點
- 優勢
- 快速的啟動速度
Webpack 等傳統的構建式打包工具，在冷啟動開發服務器時，首先都會將我們的整個代碼庫中的源代碼和node_modules進行轉換、編譯(Babel、PostCSS...)和打包，最終將打包好的文件推送到我們的瀏覽器。
vite、snowpack這類非構建式打包工具，在冷啟動開發服務器時，無需分析模塊依賴，也不需要編譯，通過ES Module 自動向依賴的資源發出請求，因此啟動速度非常快。當瀏覽器請求某個模塊時，再根據需要對模塊內容進行編譯。這種按需動態編譯的方式，極大的縮減了編譯時間，項目越復雜、模塊越多，非構建式打包工具的優勢越明顯。
- 即時響應的熱更新
在 Webpack 中，當代碼某個依賴發生了改變，webpcak 會檢查當前的依賴關系并重新打包，當我們的依賴關系復雜時，就算只修改一個文件，熱更新的速度也會越來越慢。在實踐中我們發現，即使是 HMR ，更新速度會隨著應用規模的增長而顯著下降。
在 Vite 中，HMR 是在原生 ESM 上執行的。當編輯一個文件時，Vite 只需要精確地使已編輯的模塊與其最近的 HMR 邊界之間的鏈失效（大多數時候只需要模塊本身），使 HMR 更新始終快速，無論應用的大小。同時 Vite 利用 HTTP 來加速整個頁面的重新加載，對于源碼模塊的請求會根據 304 狀態碼進行協商緩存，而外部依賴模塊的請求則會設置為強緩存，因此一旦被緩存它們將不需要再次請求。
Vite 與
create-react-app在 Repl.it 上啟動 React 應用程序的視頻比較：
- 缺點
- 生態
生態這一塊，Webpack 相較于 Vite 優勢明顯，Webpcak 的社區中有非常豐富的loader和plugin，Vite這邊插件社區起步較晚，插件數量會比較少；
好在，Vite 插件開發起來非常簡單。Vite 在插件設計上擴展了 Rollup 的插件接口，開發者通過閱讀 Rollup 的插件文檔，很快就能開發出標準的 Vite 插件了。
- 打包構建
在構建這塊，Vite 在開發服務器與產品最終構建結果沒有 Webpack 一致性強。
主要原因是我們為了在生產環境獲得最佳的加載性能和兼容性，還是需要將代碼進行tree-shaking、懶加載和 chunk 分割（以獲得更好的緩存），所以 Vite 選擇了 Rollup[3] 進行產品最終構建打包。
五、vite在vue中的使用姿勢
Vite 將為 Vue 提供第一優先級支持
- vue@2.x + vite：vue-cli-plugin-vite
- vue@3.x + vite: @vitejs/plugin-vue
- vue@3.x + JSX + vite: @vitejs/plugin-vue-jsx
