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

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

Vue CLI 概述

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

其主要功能包括：

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

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

Vite 概述

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

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

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

Vite 怎么這么快？

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

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

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

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

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

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

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

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

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

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

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

Vite 的缺點

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

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

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

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

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

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

Vue CLI vs Vite 總結(jié)

Vite 的未來

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

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

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

以上就是Vite和Vue CLI的優(yōu)劣的詳細內(nèi)容，更多關(guān)于Vite和Vue CLI的資料請關(guān)注腳本之家其它相關(guān)文章！