Vite和Vue CLI的優劣
Vue 生態系統中有一個名為 Vite 的新構建工具，它的開發服務器比 Vue CLI 快 10-100 倍。
這是否意味著 Vue CLI 已經過時瞭?在本文中，我將比較這兩種構建工具，並說明它們的優缺點，以便你可以決定哪一種適合你的下一個項目。
Vue CLI 概述
大多數 Vue 開發人員都知道，Vue CLI 是使用標準構建工具和最佳實踐配置快速建立基於 Vue 的項目的不可或缺的工具。
其主要功能包括：
- 工程腳手架
- 帶熱模塊重載的開發服務器
- 插件系統
- 用戶界面
在本討論中需要註意的是，Vue CLI 是構建在 Webpack 之上的，因此開發服務器和構建功能和性能都將是 Webpack 的超集。
Vite 概述
與 Vue CLI 類似，Vite 也是一個提供基本項目腳手架和開發服務器的構建工具。
然而，Vite 並不是基於 Webpack 的，它有自己的開發服務器，利用瀏覽器中的原生 ES 模塊。這種架構使得 Vite 比 Webpack 的開發服務器快瞭好幾個數量級。Vite 采用 Rollup 進行構建，速度也更快。
Vite 目前還處於測試階段，看來 Vite 項目的目的並不是像 Vue CLI 那樣的一體化工具，而是專註於提供一個快速的開發服務器和基本的構建工具。
Vite 怎麼這麼快？
Vite 開發服務器至少會比 Webpack 快 10 倍左右。對於一個基本的項目來說，與 2.5 秒相比，開發構建/重新構建的時間相差 250ms。
在一個較大的項目中，這種差異會變得更加明顯。Webpack 開發服務器在構建/重新構建時可能會慢到 25-30 秒，有時甚至更慢。與此同時，Vite 開發服務器可能會以恒定的 250ms 的速度為同一個項目提供服務。
這顯然是開發經驗和遊戲規則改變的差異，Vite 是如何做到這一點的？
Webpack 開發服務器架構
Webpack 的工作方式是，它通過解析應用程序中的每一個 import 和 require ，將整個應用程序構建成一個基於 JavaScript 的捆綁包，並在運行時轉換文件（例如 Sass、TypeScript、SFC）。
這都是在服務器端完成的，依賴的數量和改變後構建/重新構建的時間之間有一個大致的線性關系。
Vite 開發服務器架構
Vite 不捆綁應用服務器端。相反，它依賴於瀏覽器對 JavaScript 模塊的原生支持（也就是 ES 模塊，是一個比較新的功能）。
瀏覽器將在需要時通過 HTTP 請求任何 JS 模塊，並在運行時進行處理。Vite 開發服務器將按需轉換任何文件（如 Sass、TypeScript、SFC）。
這種架構避免瞭服務器端對整個應用的捆綁，並利用瀏覽器高效的模塊處理，提供瞭一個明顯更快的開發服務器。
提示：當你對應用程序進行 code-split 和 tree-shake 動時，Vite 的速度會更快，因為它隻加載它需要的模塊，即使是在開發階段。這與 Webpack 不同，在 Webpack 中，代碼拆分隻對生產包有利。
Vite 的缺點
你可能已經明白瞭，Vite 的主要特點是它的開發服務器快得離譜。
如果沒有這個功能，可能就不會再討論瞭，因為與 Vue CLI 相比，它確實沒有其他的功能，而且確實有一些缺點。
由於 Vite 使用瞭 JavaScript 模塊，所以最好讓依賴關系也使用 JavaScript 模塊。雖然大多數現代 JS 包都提供瞭這一點，但一些老的包可能隻提供 CommonJS 模塊。
Vite 可以將 CommonJS 轉換為 JavaSript 模塊，但在一些邊緣情況下它可能無法做到。當然，它還需要支持 JavaScript 模塊的瀏覽器。
與 Webpack/Vue CLI 不同，Vite 無法創建針對舊版瀏覽器、web components 等的捆綁包。
而且，與 Vue CLI 不同，開發服務器和構建工具是不同的系統，導致在生產與開發中可能出現不一致的行為。
Vue CLI vs Vite 總結
| Vue CLI 優點 | Vue CLI 缺點 |
|---|---|
| 經歷過戰鬥考驗，可靠 | 開發服務器速度與依賴數量成反比 |
| 與 Vue 2 兼容 | |
| 可以捆綁任何類型的依賴關系 | |
| 插件生態系統 | |
| 可以針對不同的目標進行構建 |
| Vite 優點 | Vite 缺點 |
|---|---|
| 開發服務器比 Webpack 快 10-100 倍 | 隻能針對現代瀏覽器（ES2015+） |
| 將 code-splitting 作為優先事項 | 與 CommonJS 模塊不完全兼容 |
| 處於測試階段，僅支持 Vue 3 | |
| 最小的腳手架不包括 Vuex、路由器等 | |
| 不同的開發服務器與構建工具 |
Vite 的未來
雖然上面的比較主要集中在 Vite 和 Vue CLI 的現狀上，但仍有幾點需要考慮：
- 僅當瀏覽器中的 JavaScript 模塊支持得到改善時，Vite 才會有所改善。
- 隨著 JS 生態系統的追趕，更多的軟件包將支持 JavaScript 模塊，減少 Vite 無法處理的邊緣情況。
- Vite 仍處於測試階段–功能可能會有變化。
- 有可能 Vue CLI 最終會結合 Vite，這樣你就不用再使用其中一個瞭。
值得註意的是，Vite 並不是唯一一個利用瀏覽器中 JavaScript 模塊的開發服務器項目。還有更著名的Snowpack，甚至可能會擠掉 Vite 的發展。時間會證明這一點
以上就是Vite和Vue CLI的優劣的詳細內容，更多關於Vite和Vue CLI的資料請關註WalkonNet其它相關文章！
推薦閱讀：
- JavaScript前端構建工具原理的理解
- Vite配置優雅的code spliiting代碼分割詳解
- 詳解Vite的新體驗
- Vue3+TypeScript+Vite使用require動態引入圖片等靜態資源
- Vue組件如何自動按需引入詳析