Vite和Vue CLI的優(yōu)劣

更新時(shí)間：2021年01月30日 15:28:46 作者：程序員張張

這篇文章主要介紹了Vite比Vue CLI快在哪里，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

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)
用戶(hù)界面

在本討論中需要注意的是，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)榕c Vue 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é)

Vue CLI 優(yōu)點(diǎn)	Vue CLI 缺點(diǎn)
經(jīng)歷過(guò)戰(zhàn)斗考驗(yàn)，可靠	開(kāi)發(fā)服務(wù)器速度與依賴(lài)數(shù)量成反比
與 Vue 2 兼容
可以捆綁任何類(lèi)型的依賴(lài)關(guān)系
插件生態(tài)系統(tǒng)
可以針對(duì)不同的目標(biāo)進(jìn)行構(gòu)建

Vite 優(yōu)點(diǎn)	Vite 缺點(diǎn)
開(kāi)發(fā)服務(wù)器比 Webpack 快 10-100 倍	只能針對(duì)現(xiàn)代瀏覽器（ES2015+）
將 code-splitting 作為優(yōu)先事項(xiàng)	與 CommonJS 模塊不完全兼容
	處于測(cè)試階段，僅支持 Vue 3
	最小的腳手架不包括 Vuex、路由器等
	不同的開(kāi)發(fā)服務(wù)器與構(gòu)建工具