Vite使Vue CLI過時(shí)了嗎？
Vue生態(tài)系統(tǒng)中有一個(gè)名為Vite的新構(gòu)建工具，它的開發(fā)服務(wù)器比Vue CLI快10-100倍。
這是否意味著Vue CLI已經(jīng)過時(shí)了?在本文中，我將比較這兩種構(gòu)建工具，并說明它們的優(yōu)缺點(diǎn)，以便你可以決定哪一種適合你的下一個(gè)項(xiàng)目。
Vue CLI概述
大多數(shù)Vue開發(fā)人員都知道，Vue CLI是使用標(biāo)準(zhǔn)構(gòu)建工具和最佳實(shí)踐配置快速建立基于Vue的項(xiàng)目的不可或缺的工具。
其主要功能包括：
- 工程腳手架
- 帶熱模塊重載的開發(fā)服務(wù)器
- 插件系統(tǒng)
- 用戶界面
在本討論中需要注意的是，Vue CLI是構(gòu)建在Webpack之上的，因此開發(fā)服務(wù)器和構(gòu)建功能和性能都將是Webpack的超集。
Vite概述
與Vue CLI類似，Vite也是一個(gè)提供基本項(xiàng)目腳手架和開發(fā)服務(wù)器的構(gòu)建工具。
然而，Vite并不是基于Webpack的，它有自己的開發(fā)服務(wù)器，利用瀏覽器中的原生ES模塊。這種架構(gòu)使得Vite比Webpack的開發(fā)服務(wù)器快了好幾個(gè)數(shù)量級(jí)。Vite采用Rollup進(jìn)行構(gòu)建，速度也更快。
Vite目前還處于測(cè)試階段，看來Vite項(xiàng)目的目的并不是像Vue CLI那樣的一體化工具，而是專注于提供一個(gè)快速的開發(fā)服務(wù)器和基本的構(gòu)建工具。
Vite怎么這么快?
Vite開發(fā)服務(wù)器至少會(huì)比Webpack快10倍左右。對(duì)于一個(gè)基本的項(xiàng)目來說，與2.5秒相比，開發(fā)構(gòu)建/重新構(gòu)建的時(shí)間相差250ms。
在一個(gè)較大的項(xiàng)目中，這種差異會(huì)變得更加明顯。Webpack開發(fā)服務(wù)器在構(gòu)建/重新構(gòu)建時(shí)可能會(huì)慢到25-30秒，有時(shí)甚至更慢。與此同時(shí)，Vite開發(fā)服務(wù)器可能會(huì)以恒定的250ms的速度為同一個(gè)項(xiàng)目提供服務(wù)。
這顯然是開發(fā)經(jīng)驗(yàn)和游戲規(guī)則改變的差異，Vite是如何做到這一點(diǎn)的?
Webpack開發(fā)服務(wù)器架構(gòu)
Webpack的工作方式是，它通過解析應(yīng)用程序中的每一個(gè) import 和 require ，將整個(gè)應(yīng)用程序構(gòu)建成一個(gè)基于JavaScript的捆綁包，并在運(yùn)行時(shí)轉(zhuǎn)換文件(例如Sass、TypeScript、SFC)。
這都是在服務(wù)器端完成的，依賴的數(shù)量和改變后構(gòu)建/重新構(gòu)建的時(shí)間之間有一個(gè)大致的線性關(guān)系。
Vite開發(fā)服務(wù)器架構(gòu)
Vite不捆綁應(yīng)用服務(wù)器端。相反，它依賴于瀏覽器對(duì)JavaScript模塊的原生支持(也就是ES模塊，是一個(gè)比較新的功能)。
瀏覽器將在需要時(shí)通過HTTP請(qǐng)求任何JS模塊，并在運(yùn)行時(shí)進(jìn)行處理。Vite開發(fā)服務(wù)器將按需轉(zhuǎn)換任何文件(如Sass、TypeScript、SFC)。
這種架構(gòu)避免了服務(wù)器端對(duì)整個(gè)應(yīng)用的捆綁，并利用瀏覽器高效的模塊處理，提供了一個(gè)明顯更快的開發(fā)服務(wù)器。
提示：當(dāng)你對(duì)應(yīng)用程序進(jìn)行code-split和tree-shake動(dòng)時(shí)，Vite的速度會(huì)更快，因?yàn)樗患虞d它需要的模塊，即使是在開發(fā)階段。這與Webpack不同，在Webpack中，代碼拆分只對(duì)生產(chǎn)包有利。
Vite的缺點(diǎn)
你可能已經(jīng)明白了，Vite的主要特點(diǎn)是它的開發(fā)服務(wù)器快得離譜。
如果沒有這個(gè)功能，可能就不會(huì)再討論了，因?yàn)榕cVue CLI相比，它確實(shí)沒有其他的功能，而且確實(shí)有一些缺點(diǎn)。
由于Vite使用了JavaScript模塊，所以最好讓依賴關(guān)系也使用JavaScript模塊。雖然大多數(shù)現(xiàn)代JS包都提供了這一點(diǎn)，但一些老的包可能只提供CommonJS模塊。
Vite可以將CommonJS轉(zhuǎn)換為JavaSript模塊，但在一些邊緣情況下它可能無法做到。當(dāng)然，它還需要支持JavaScript模塊的瀏覽器。
與Webpack/Vue CLI不同，Vite無法創(chuàng)建針對(duì)舊版瀏覽器、web components等的捆綁包。
而且，與Vue CLI不同，開發(fā)服務(wù)器和構(gòu)建工具是不同的系統(tǒng)，導(dǎo)致在生產(chǎn)與開發(fā)中可能出現(xiàn)不一致的行為。
Vue CLI vs Vite總結(jié)
| Vue CLI 優(yōu)點(diǎn) | Vue CLI 缺點(diǎn) |
|---|---|
| 經(jīng)歷過戰(zhàn)斗考驗(yàn)，可靠 | 開發(fā)服務(wù)器速度與依賴數(shù)量成反比 |
| 與Vue 2兼容 | |
| 可以捆綁任何類型的依賴關(guān)系 | |
| 插件生態(tài)系統(tǒng) | |
| 可以針對(duì)不同的目標(biāo)進(jìn)行構(gòu)建 |
| Vite 優(yōu)點(diǎn) | Vite 缺點(diǎn) |
|---|---|
| 開發(fā)服務(wù)器比Webpack快10-100倍 | 只能針對(duì)現(xiàn)代瀏覽器（ES2015+） |
| 將code-splitting作為優(yōu)先事項(xiàng) | 與CommonJS模塊不完全兼容 |
| 處于測(cè)試階段，僅支持Vue 3 | |
| 最小的腳手架不包括Vuex、路由器等 | |
| 不同的開發(fā)服務(wù)器與構(gòu)建工具 |
那么判決結(jié)果是什么?
對(duì)于有經(jīng)驗(yàn)的Vue開發(fā)來說，Vite是一個(gè)很好的選擇，因?yàn)樗拈_發(fā)服務(wù)器速度快得離譜，讓W(xué)ebpack看起來像史前時(shí)代。
但是，對(duì)于喜歡一些手把手的Vue新開發(fā)人員來說，或者，對(duì)于使用遺留模塊和需要復(fù)雜構(gòu)建的大型項(xiàng)目來說，Vue CLI很可能在目前仍然是必不可少的。
Vite的未來
雖然上面的比較主要集中在Vite和Vue CLI的現(xiàn)狀上，但仍有幾點(diǎn)需要考慮：
- 僅當(dāng)瀏覽器中的JavaScript模塊支持得到改善時(shí)，Vite才會(huì)有所改善。
- 隨著JS生態(tài)系統(tǒng)的追趕，更多的軟件包將支持JavaScript模塊，減少Vite無法處理的邊緣情況。
- Vite仍處于測(cè)試階段--功能可能會(huì)有變化。
- 有可能Vue CLI最終會(huì)結(jié)合Vite，這樣你就不用再使用其中一個(gè)了。
值得注意的是，Vite并不是唯一一個(gè)利用瀏覽器中JavaScript模塊的開發(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)「前端全棧開發(fā)者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端全棧開發(fā)者公眾號(hào)。
