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

粉絲福利

144期留言+在看幸運用戶：暫無。

臨走前留下，今天的福利

• 福利1：《教你玩轉手機攝影，隨手拍出好照片》獲取資源請在公衆號對話框中回覆關鍵字：FL04，若是沒有關注請掃下面的二維碼
• 福利2：在看+留言，我隨機抽取一位認真留言的小夥伴，給他發一個紅包獎勵