Vite 或 Vue CLI，我該選擇哪一個
隨著 Vue 生態(tài)系統(tǒng)的成熟，已經(jīng)引入了許多新技術(shù)。雖然一些開發(fā)人員可能從一個普通的 JavaScript 文件開始，并在頁面中包含 Vue。但隨著時間的推移，在開發(fā) Vue 應(yīng)用程序時，使用打包工具和命令行界面成為更加標(biāo)準(zhǔn)的開發(fā)流程。
Vue 不會強制你選擇某種開發(fā)、打包方式，但vue的生態(tài)系統(tǒng)提供了許多工具，例如 Vue CLI 和最近的推出的Vite js。那么你應(yīng)該使用 Vite 還是 Vue CLI？在做出選擇的時候，了解 Vite 和 Vue CLI 之間的區(qū)別會對我們有很大的幫助。
在本文中，我們將深入探討 Vite 與 Vue CLI，以便你可以根據(jù)自己的需求做出最佳選擇。
Vue CLI 是如何工作的？
Vue 命令行界面 (CLI) 圍繞 Webpack 創(chuàng)建一個包裝器來編譯你的 Vue 項目。但是我們?yōu)槭裁匆幾g它呢？在 Webpack 和 Rollup 這樣的打包工具出現(xiàn)之前，我們只需要將我們的 JavaScript 文件部署到服務(wù)器并將它們?nèi)堪谝粋€頁面上。當(dāng)我們的項目很小的時候，這種效果很好。但是隨著 Vue 的發(fā)展，我們開始需要某種程度的打包功能。單文件組件 (SFC) 和 TypeScript的使用都需要借助打包工具來構(gòu)建我們的項目。這就是為什么要引入Vue CLI 。
Vue CLI 允許我們在開發(fā)和生產(chǎn)期間創(chuàng)建和構(gòu)建項目。CLI 隱藏了 Webpack 的復(fù)雜配置細節(jié)，并在開發(fā)和生產(chǎn)過程中為我們的項目提供服務(wù)。但是，如果我們想要將它與 Vite 進行比較，那就讓我們再深入一點。
Webpack
正如 Webpack 網(wǎng)站所描述的，Webpack 是一個靜態(tài)模塊打包工具。但是，這是什么意思？Webpack 的主要目標(biāo)是獲取你的 Web 項目的資產(chǎn)并將它們打包到少量文件中以供瀏覽器下載。這并不意味著立即加載項目的所有文件，也可以按需下載。
雖然 Webpack 可以打包非代碼資產(chǎn)，但它真正的閃光點是打包相關(guān)的代碼。你可以認為打包就是簡單地將所有代碼文件（例如JavaScript/TypeScript）合并在一起，但實際上這里還有更多的內(nèi)容。
Webpack 處理代碼中的 imports/require 語句時，只包含實際需要的文件。此外，它經(jīng)常進行“tree-shaking”，這可以刪除實際上從未引用過的代碼塊（例如類、函數(shù)）。通過這種方式，Webpack 可以非常高效地打包你的項目。但是，如果我們正在研究 Vue CLI（包含 Webpack）與 Vite 的比較，我們需要繼續(xù)看看在開發(fā)時會發(fā)生什么。
開發(fā)過程中的 Webpack
在 Vue CLI 中，Webpack 用于模塊綁定。在開發(fā)時也會發(fā)生這種綁定。當(dāng)你通過 CLI 開發(fā) Vue 項目時，它會指示 Webpack 以增量方式構(gòu)建項目并監(jiān)聽更改，以便它可以將更改的文件打包并在瀏覽器中進行替換。因為構(gòu)建包是增量的，所以它可以在你開發(fā)項目時快速的將更改同步。第一次構(gòu)建項目時可能會較慢（即 3 秒或更長時間，具體取決于你的項目大?。?，但一旦項目啟動，增量更改的同步會非常快（即 < 1 秒，通常小于 100 毫秒）。
Vite js 是如何工作的？
如果你是Vite的新手，我建議直接從它的創(chuàng)造者尤雨溪那里學(xué)習(xí)，他在Vue Mastery的課程“使用vite快速構(gòu)建”中教我們關(guān)于Vite的知識。
如果你看過該課程的第一課（它是免費的），你將了解如何開始，但在我們將其與 Vue CLI 和 Webpack 進行比較之前，我們需要了解 Vite 的工作原理。
當(dāng)你創(chuàng)建一個基本的 Vite 項目（在我們的例子中，是 Vue 3 的 Vite 項目）時，index.html文件是非常基本的：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml"
href="/vite.svg" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
**<script type="module" src="/src/main.js"></script>**
</body>
</html>
你會注意到這與 Vue CLI 看起來很相似，但有一個主要例外：script標(biāo)記使用type="module“。除非你使用 TypeScript，否則這里沒有真正的構(gòu)建步驟。src腳本指向你的實際源代碼文件。
當(dāng)這個請求傳入時，它會將main.js文件作為原生 ES 模塊發(fā)送到瀏覽器。這意味著它根本不會打包你的代碼。實際上，源文件只是一個簡單的Vue啟動文件：
main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
這里發(fā)生了什么？Vite 正在利用原生 ES 模塊和動態(tài) ESM 模塊，以便根據(jù)需要將代碼注入瀏覽器。本質(zhì)上，項目中的每次導(dǎo)入都會強制瀏覽器根據(jù)需要加載每個有效負載。這些導(dǎo)入將級聯(lián)以獲得特定情況下所需的所有代碼。
這意味著在開發(fā)過程中， Vite 不但為你的網(wǎng)站提供服務(wù)，并且它也支持動態(tài)加載（在支持它的新瀏覽器中，并且也兼容舊瀏覽器）。
此外，Vite 在你開發(fā)項目時使用模塊熱替換 (HMR) 來更新修改的代碼。使你能夠在開發(fā)時獲得即時的啟動速度，這會大大提高開發(fā)體驗。
但是 Vite 是如何在生產(chǎn)環(huán)境中實現(xiàn)這一點的呢？讓我們來看看。
Vite 和生產(chǎn)環(huán)境
雖然 Vite 在開發(fā)過程中使用其提供文件的能力來加速該過程，但 Vite 本身并沒有真正打包你的項目。相反，它依賴于一個名為"Rollup"的打包程序來進行實際的打包。
通過使用Vite中的build命令，它將使用rollup來構(gòu)建你的項目：
命令行
> vite build
這將構(gòu)建項目，生成幾個文件（使用校驗和以避免緩存的影響）：
命令行
vite v3.0.9 building for production
? 16 modules transformed.
dist/assets/vue.5532db34.svg 0.48 KiB
dist/index.html 0.44 KiB
dist/assets/index.43cf8108.css 1.26 KiB / gzip: 0.65 KiB
dist/assets/index.3ee41559.js 52.82 KiB / gzip: 21.30 KiB
與 Vue CLI 非常相似，Vite 允許通過配置文件配置 Rollup（配置文件具有非常合理的默認值）：
vue.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
sourcemap: true,
outDir: "public/build/"
}
})
例如，設(shè)置sourcemap和outDir，都直接傳遞給 Rollup 進行配置。vite.config.js中的選項允許你在必要時對Rollup進行深入配置。
因此，使用 Vite 實際上為你提供了兩種不同的體驗：在開發(fā)時的快速調(diào)試體驗；遵循 Rollup 規(guī)范，允許你以想要的方式構(gòu)建項目。
當(dāng) Vite 使用Rollup時， Rollup不是必需的。你可以使用任何你想要的打包工具代替 Rollup 來構(gòu)建你的 Vue 項目。
Vite 或 Vue CLI：我應(yīng)該選擇哪個？
這個問題沒有一個明確的答案，Vite 還是 Vue CLI 哪個更好？
但我想把它分成兩個不同的討論：在開發(fā)中使用和在生產(chǎn)中使用。
開發(fā)時
Vue CLI（以及擴展的 Webpack）和 Vite 的整體體驗在開發(fā)過程中可能是相似的。兩者都增量構(gòu)建你的項目并使用模塊熱替換來替換運行的項目中改動的代碼。
兩者的區(qū)別歸結(jié)為速度。Webpack 從源代碼構(gòu)建項目，并在開發(fā)項目時持續(xù)進行增量構(gòu)建。
另一方面，Vite 會根據(jù)需要將實際代碼加載到瀏覽器中。這意味著不需要太多源代碼的映射，因為在瀏覽器中運行的代碼就是你正在使用的實際代碼（和文件）。這意味著，在大多數(shù)情況下，你會發(fā)現(xiàn) Vite 比 Vue CLI 提供更快速和直接的開發(fā)和調(diào)試體驗。在 Vue CLI 中，你調(diào)試的是Webpack 生成的代碼（通過使用源代碼映射），而不是調(diào)試的你正在編寫的代碼。
另一個好處是 Vite 不依賴于 Vue.js。Vite 可以在不同的環(huán)境中使用：純 JavaScript、React、PReact 和 SvelteKit。因此，如果你在多個環(huán)境中工作，則可以更輕松地使用（和配置）一個工具來處理不同的項目。
生產(chǎn)時
Rollup 類似于 Webpack（以及Parcel，另一個流行的打包工具），盡管它們的工作方式有點不同。
Webpack基于CommonJS API來管理JavaScript模塊。即使 Webpack 支持 ES 模塊，底層構(gòu)建系統(tǒng)仍然希望模塊可以動態(tài)加載（因為require()只有在函數(shù)執(zhí)行時才導(dǎo)入模塊）。
相比之下，Rollup 依賴于 ES 模塊，這意味著它可以比 Webpack 更輕松地進行靜態(tài)分析，盡管這種差異非常小。但是，使用 Rollup 需要你具有支持 ES 模塊的依賴項。這可能會給不支持ES模塊的庫帶來一些問題，但這些庫現(xiàn)在越來越少了。
最終，由你來決定
雖然我不能為你做決定，但我希望我已經(jīng)列出了這兩種方法的優(yōu)缺點。我通常將 Vite（帶有 Rollup）用于新項目，但我沒有看到足夠的好處來吸引我將現(xiàn)有的所有Vue CLI項目遷移到Vite。
在某些時候，這不太重要，因為尤雨溪曾表示，它們會在某個時刻趨于一致（例如，在 CLI 中用 Vite 替換 Webpack）。但就目前而言，這還沒有發(fā)生，兩種方法都得到了很好的支持。
