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的主要特點是它的開發伺服器快得離譜。
由於Vite使用了JavaScript模組，所以最好讓依賴關係也使用JavaScript模組。雖然大多數現代JS包都提供了這一點，但一些老的包可能只提供CommonJS模組。
Vite可以將CommonJS轉換為JavaSript模組，但在一些邊緣情況下它可能無法做到。當然，它還需要支援JavaScript模組的瀏覽器。
與Webpack/Vue CLI不同，Vite無法建立針對舊版瀏覽器、web components等的捆綁包。
而且，與Vue CLI不同，開發伺服器和構建工具是不同的系統，導致在生產與開發中可能出現不一致的行為。
Vue CLI vs Vite總結那麼判決結果是什麼？
對於有經驗的Vue開發來說，Vite是一個很好的選擇，因為它的開發伺服器速度快得離譜，讓Webpack看起來像史前時代。
但是，對於喜歡一些手把手的Vue新開發人員來說，或者，對於使用遺留模組和需要複雜構建的大型專案來說，Vue CLI很可能在目前仍然是必不可少的。
Vite的未來雖然上面的比較主要集中在Vite和Vue CLI的現狀上，但仍有幾點需要考慮：
僅當瀏覽器中的JavaScript模組支援得到改善時，Vite才會有所改善。隨著JS生態系統的追趕，更多的軟體包將支援JavaScript模組，減少Vite無法處理的邊緣情況。Vite仍處於測試階段--功能可能會有變化。有可能Vue CLI最終會結合Vite，這樣你就不用再使用其中一個了。值得注意的是，Vite並不是唯一一個利用瀏覽器中JavaScript模組的開發伺服器專案。還有更著名的Snowpack，甚至可能會擠掉Vite的發展。時間會證明這一點
最近整理了一份優質影片教程資源，想要的可以關注我然後私信“666”即可免費領取哦！如果文章對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。