[[357678]]

Vue生態(tài)系統(tǒng)中有一個名為Vite的新構(gòu)建工具，它的開發(fā)服務器比Vue CLI快10-100倍。

這是否意味著Vue CLI已經(jīng)過時了?在本文中，我將比較這兩種構(gòu)建工具，并說明它們的優(yōu)缺點，以便你可以決定哪一種適合你的下一個項目。

Vue CLI概述

大多數(shù)Vue開發(fā)人員都知道，Vue CLI是使用標準構(gòu)建工具和最佳實踐配置快速建立基于Vue的項目的不可或缺的工具。

其主要功能包括：

• 工程腳手架
• 帶熱模塊重載的開發(fā)服務器
• 插件系統(tǒng)
• 用戶界面

在本討論中需要注意的是，Vue CLI是構(gòu)建在Webpack之上的，因此開發(fā)服務器和構(gòu)建功能和性能都將是Webpack的超集。

Vite概述

與Vue CLI類似，Vite也是一個提供基本項目腳手架和開發(fā)服務器的構(gòu)建工具。

然而，Vite并不是基于Webpack的，它有自己的開發(fā)服務器，利用瀏覽器中的原生ES模塊。這種架構(gòu)使得Vite比Webpack的開發(fā)服務器快了好幾個數(shù)量級。Vite采用Rollup進行構(gòu)建，速度也更快。

Vite目前還處于測試階段，看來Vite項目的目的并不是像Vue CLI那樣的一體化工具，而是專注于提供一個快速的開發(fā)服務器和基本的構(gòu)建工具。

Vite怎么這么快?

Vite開發(fā)服務器至少會比Webpack快10倍左右。對于一個基本的項目來說，與2.5秒相比，開發(fā)構(gòu)建/重新構(gòu)建的時間相差250ms。

在一個較大的項目中，這種差異會變得更加明顯。Webpack開發(fā)服務器在構(gòu)建/重新構(gòu)建時可能會慢到25-30秒，有時甚至更慢。與此同時，Vite開發(fā)服務器可能會以恒定的250ms的速度為同一個項目提供服務。

這顯然是開發(fā)經(jīng)驗和游戲規(guī)則改變的差異，Vite是如何做到這一點的?

Webpack開發(fā)服務器架構(gòu)

Webpack的工作方式是，它通過解析應用程序中的每一個 import 和 require ，將整個應用程序構(gòu)建成一個基于JavaScript的捆綁包，并在運行時轉(zhuǎn)換文件(例如Sass、TypeScript、SFC)。

這都是在服務器端完成的，依賴的數(shù)量和改變后構(gòu)建/重新構(gòu)建的時間之間有一個大致的線性關系。

Vite開發(fā)服務器架構(gòu)

Vite不捆綁應用服務器端。相反，它依賴于瀏覽器對JavaScript模塊的原生支持(也就是ES模塊，是一個比較新的功能)。

瀏覽器將在需要時通過HTTP請求任何JS模塊，并在運行時進行處理。Vite開發(fā)服務器將按需轉(zhuǎn)換任何文件(如Sass、TypeScript、SFC)。

這種架構(gòu)避免了服務器端對整個應用的捆綁，并利用瀏覽器高效的模塊處理，提供了一個明顯更快的開發(fā)服務器。

提示：當你對應用程序進行code-split和tree-shake動時，Vite的速度會更快，因為它只加載它需要的模塊，即使是在開發(fā)階段。這與Webpack不同，在Webpack中，代碼拆分只對生產(chǎn)包有利。

Vite的缺點

你可能已經(jīng)明白了，Vite的主要特點是它的開發(fā)服務器快得離譜。

如果沒有這個功能，可能就不會再討論了，因為與Vue CLI相比，它確實沒有其他的功能，而且確實有一些缺點。

由于Vite使用了JavaScript模塊，所以最好讓依賴關系也使用JavaScript模塊。雖然大多數(shù)現(xiàn)代JS包都提供了這一點，但一些老的包可能只提供CommonJS模塊。

Vite可以將CommonJS轉(zhuǎn)換為JavaSript模塊，但在一些邊緣情況下它可能無法做到。當然，它還需要支持JavaScript模塊的瀏覽器。

與Webpack/Vue CLI不同，Vite無法創(chuàng)建針對舊版瀏覽器、web components等的捆綁包。

而且，與Vue CLI不同，開發(fā)服務器和構(gòu)建工具是不同的系統(tǒng)，導致在生產(chǎn)與開發(fā)中可能出現(xiàn)不一致的行為。

Vue CLI vs Vite總結(jié)

那么判決結(jié)果是什么?

對于有經(jīng)驗的Vue開發(fā)來說，Vite是一個很好的選擇，因為它的開發(fā)服務器速度快得離譜，讓Webpack看起來像史前時代。

但是，對于喜歡一些手把手的Vue新開發(fā)人員來說，或者，對于使用遺留模塊和需要復雜構(gòu)建的大型項目來說，Vue CLI很可能在目前仍然是必不可少的。

Vite的未來

雖然上面的比較主要集中在Vite和Vue CLI的現(xiàn)狀上，但仍有幾點需要考慮：

• 僅當瀏覽器中的JavaScript模塊支持得到改善時，Vite才會有所改善。
• 隨著JS生態(tài)系統(tǒng)的追趕，更多的軟件包將支持JavaScript模塊，減少Vite無法處理的邊緣情況。
• Vite仍處于測試階段--功能可能會有變化。
• 有可能Vue CLI最終會結(jié)合Vite，這樣你就不用再使用其中一個了。

值得注意的是，Vite并不是唯一一個利用瀏覽器中JavaScript模塊的開發(fā)服務器項目。還有更著名的 Snowpack 甚至可能會擠掉Vite的發(fā)展。時間會證明這一點

Snowpack：https://www.snowpack.dev/

原文：https://vuejsdevelopers.com/2020/12/07/vite-vue-cli/

作者：Anthony Gore

本文轉(zhuǎn)載自微信公眾號「前端全棧開發(fā)者」，可以通過以下二維碼關注。轉(zhuǎn)載本文請聯(lián)系前端全棧開發(fā)者公眾號。