[[357678]]

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

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

Vue CLI概述

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

其主要功能包括：

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

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

Vite概述

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

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

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

Vite怎么這么快?

Vite開(kāi)發(fā)服務(wù)器至少會(huì)比Webpack快10倍左右。對(duì)于一個(gè)基本的項(xiàng)目來(lái)說(shuō)，與2.5秒相比，開(kāi)發(fā)構(gòu)建/重新構(gòu)建的時(shí)間相差250ms。

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

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

Webpack開(kāi)發(fā)服務(wù)器架構(gòu)

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

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

Vite開(kāi)發(fā)服務(wù)器架構(gòu)

Vite不捆綁應(yīng)用服務(wù)器端。相反，它依賴(lài)于瀏覽器對(duì)JavaScript模塊的原生支持(也就是ES模塊，是一個(gè)比較新的功能)。

瀏覽器將在需要時(shí)通過(guò)HTTP請(qǐng)求任何JS模塊，并在運(yùn)行時(shí)進(jìn)行處理。Vite開(kāi)發(fā)服務(wù)器將按需轉(zhuǎn)換任何文件(如Sass、TypeScript、SFC)。

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

提示：當(dāng)你對(duì)應(yīng)用程序進(jìn)行code-split和tree-shake動(dòng)時(shí)，Vite的速度會(huì)更快，因?yàn)樗患虞d它需要的模塊，即使是在開(kāi)發(fā)階段。這與Webpack不同，在Webpack中，代碼拆分只對(duì)生產(chǎn)包有利。

Vite的缺點(diǎn)

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

如果沒(méi)有這個(gè)功能，可能就不會(huì)再討論了，因?yàn)榕cVue CLI相比，它確實(shí)沒(méi)有其他的功能，而且確實(shí)有一些缺點(diǎn)。

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

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

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

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

Vue CLI vs Vite總結(jié)

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

對(duì)于有經(jīng)驗(yàn)的Vue開(kāi)發(fā)來(lái)說(shuō)，Vite是一個(gè)很好的選擇，因?yàn)樗拈_(kāi)發(fā)服務(wù)器速度快得離譜，讓W(xué)ebpack看起來(lái)像史前時(shí)代。

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

Vite的未來(lái)

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

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

值得注意的是，Vite并不是唯一一個(gè)利用瀏覽器中JavaScript模塊的開(kāi)發(fā)服務(wù)器項(xiàng)目。還有更著名的 Snowpack 甚至可能會(huì)擠掉Vite的發(fā)展。時(shí)間會(huì)證明這一點(diǎn)

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

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

作者：Anthony Gore

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