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、路由器等 | |
| 不同的開發服務器與構建工具 |
那么判決結果是什么?
對于有經驗的Vue開發來說，Vite是一個很好的選擇，因為它的開發服務器速度快得離譜，讓Webpack看起來像史前時代。
但是，對于喜歡一些手把手的Vue新開發人員來說，或者，對于使用遺留模塊和需要復雜構建的大型項目來說，Vue CLI很可能在目前仍然是必不可少的。
Vite的未來
雖然上面的比較主要集中在Vite和Vue CLI的現狀上，但仍有幾點需要考慮：
- 僅當瀏覽器中的JavaScript模塊支持得到改善時，Vite才會有所改善。
- 隨著JS生態系統的追趕，更多的軟件包將支持JavaScript模塊，減少Vite無法處理的邊緣情況。
- Vite仍處于測試階段--功能可能會有變化。
- 有可能Vue CLI最終會結合Vite，這樣你就不用再使用其中一個了。
值得注意的是，Vite并不是唯一一個利用瀏覽器中JavaScript模塊的開發服務器項目。還有更著名的 Snowpack 甚至可能會擠掉Vite的發展。時間會證明這一點
Snowpack：https://www.snowpack.dev/
原文：https://vuejsdevelopers.com/2020/12/07/vite-vue-cli/
作者：Anthony Gore
本文轉載自微信公眾號「前端全棧開發者」，可以通過以下二維碼關注。轉載本文請聯系前端全棧開發者公眾號。
