Vite 或 Vue CLI，我該選擇哪一個
隨著 Vue 生態系統的成熟，已經引入了許多新技術。雖然一些開發人員可能從一個普通的 JavaScript 文件開始，并在頁面中包含 Vue。但隨著時間的推移，在開發 Vue 應用程序時，使用打包工具和命令行界面成為更加標準的開發流程。
Vue 不會強制你選擇某種開發、打包方式，但vue的生態系統提供了許多工具，例如 Vue CLI 和最近的推出的Vite js。那么你應該使用 Vite 還是 Vue CLI？在做出選擇的時候，了解 Vite 和 Vue CLI 之間的區別會對我們有很大的幫助。
在本文中，我們將深入探討 Vite 與 Vue CLI，以便你可以根據自己的需求做出最佳選擇。
Vue CLI 是如何工作的？
Vue 命令行界面 (CLI) 圍繞 Webpack 創建一個包裝器來編譯你的 Vue 項目。但是我們為什么要編譯它呢？在 Webpack 和 Rollup 這樣的打包工具出現之前，我們只需要將我們的 JavaScript 文件部署到服務器并將它們全部包含在一個頁面上。當我們的項目很小的時候，這種效果很好。但是隨著 Vue 的發展，我們開始需要某種程度的打包功能。單文件組件 (SFC) 和 TypeScript的使用都需要借助打包工具來構建我們的項目。這就是為什么要引入Vue CLI 。
Vue CLI 允許我們在開發和生產期間創建和構建項目。CLI 隱藏了 Webpack 的復雜配置細節，并在開發和生產過程中為我們的項目提供服務。但是，如果我們想要將它與 Vite 進行比較，那就讓我們再深入一點。
Webpack
正如 Webpack 網站所描述的，Webpack 是一個靜態模塊打包工具。但是，這是什么意思？Webpack 的主要目標是獲取你的 Web 項目的資產并將它們打包到少量文件中以供瀏覽器下載。這并不意味著立即加載項目的所有文件，也可以按需下載。
雖然 Webpack 可以打包非代碼資產，但它真正的閃光點是打包相關的代碼。你可以認為打包就是簡單地將所有代碼文件（例如JavaScript/TypeScript）合并在一起，但實際上這里還有更多的內容。
Webpack 處理代碼中的 imports/require 語句時，只包含實際需要的文件。此外，它經常進行“tree-shaking”，這可以刪除實際上從未引用過的代碼塊（例如類、函數）。通過這種方式，Webpack 可以非常高效地打包你的項目。但是，如果我們正在研究 Vue CLI（包含 Webpack）與 Vite 的比較，我們需要繼續看看在開發時會發生什么。
開發過程中的 Webpack
在 Vue CLI 中，Webpack 用于模塊綁定。在開發時也會發生這種綁定。當你通過 CLI 開發 Vue 項目時，它會指示 Webpack 以增量方式構建項目并監聽更改，以便它可以將更改的文件打包并在瀏覽器中進行替換。因為構建包是增量的，所以它可以在你開發項目時快速的將更改同步。第一次構建項目時可能會較慢（即 3 秒或更長時間，具體取決于你的項目大小），但一旦項目啟動，增量更改的同步會非常快（即 < 1 秒，通常小于 100 毫秒）。
Vite js 是如何工作的？
如果你是Vite的新手，我建議直接從它的創造者尤雨溪那里學習，他在Vue Mastery的課程“使用vite快速構建”中教我們關于Vite的知識。
如果你看過該課程的第一課（它是免費的），你將了解如何開始，但在我們將其與 Vue CLI 和 Webpack 進行比較之前，我們需要了解 Vite 的工作原理。
當你創建一個基本的 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標記使用type="module“。除非你使用 TypeScript，否則這里沒有真正的構建步驟。src腳本指向你的實際源代碼文件。
當這個請求傳入時，它會將main.js文件作為原生 ES 模塊發送到瀏覽器。這意味著它根本不會打包你的代碼。實際上，源文件只是一個簡單的Vue啟動文件：
main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
這里發生了什么？Vite 正在利用原生 ES 模塊和動態 ESM 模塊，以便根據需要將代碼注入瀏覽器。本質上，項目中的每次導入都會強制瀏覽器根據需要加載每個有效負載。這些導入將級聯以獲得特定情況下所需的所有代碼。
這意味著在開發過程中， Vite 不但為你的網站提供服務，并且它也支持動態加載（在支持它的新瀏覽器中，并且也兼容舊瀏覽器）。
此外，Vite 在你開發項目時使用模塊熱替換 (HMR) 來更新修改的代碼。使你能夠在開發時獲得即時的啟動速度，這會大大提高開發體驗。
但是 Vite 是如何在生產環境中實現這一點的呢？讓我們來看看。
Vite 和生產環境
雖然 Vite 在開發過程中使用其提供文件的能力來加速該過程，但 Vite 本身并沒有真正打包你的項目。相反，它依賴于一個名為"Rollup"的打包程序來進行實際的打包。
通過使用Vite中的build命令，它將使用rollup來構建你的項目：
命令行
> vite build
這將構建項目，生成幾個文件（使用校驗和以避免緩存的影響）：
命令行
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/"
}
})
例如，設置sourcemap和outDir，都直接傳遞給 Rollup 進行配置。vite.config.js中的選項允許你在必要時對Rollup進行深入配置。
因此，使用 Vite 實際上為你提供了兩種不同的體驗：在開發時的快速調試體驗；遵循 Rollup 規范，允許你以想要的方式構建項目。
當 Vite 使用Rollup時， Rollup不是必需的。你可以使用任何你想要的打包工具代替 Rollup 來構建你的 Vue 項目。
Vite 或 Vue CLI：我應該選擇哪個？
這個問題沒有一個明確的答案，Vite 還是 Vue CLI 哪個更好？
但我想把它分成兩個不同的討論：在開發中使用和在生產中使用。
開發時
Vue CLI（以及擴展的 Webpack）和 Vite 的整體體驗在開發過程中可能是相似的。兩者都增量構建你的項目并使用模塊熱替換來替換運行的項目中改動的代碼。
兩者的區別歸結為速度。Webpack 從源代碼構建項目，并在開發項目時持續進行增量構建。
另一方面，Vite 會根據需要將實際代碼加載到瀏覽器中。這意味著不需要太多源代碼的映射，因為在瀏覽器中運行的代碼就是你正在使用的實際代碼（和文件）。這意味著，在大多數情況下，你會發現 Vite 比 Vue CLI 提供更快速和直接的開發和調試體驗。在 Vue CLI 中，你調試的是Webpack 生成的代碼（通過使用源代碼映射），而不是調試的你正在編寫的代碼。
另一個好處是 Vite 不依賴于 Vue.js。Vite 可以在不同的環境中使用：純 JavaScript、React、PReact 和 SvelteKit。因此，如果你在多個環境中工作，則可以更輕松地使用（和配置）一個工具來處理不同的項目。
生產時
Rollup 類似于 Webpack（以及Parcel，另一個流行的打包工具），盡管它們的工作方式有點不同。
Webpack基于CommonJS API來管理JavaScript模塊。即使 Webpack 支持 ES 模塊，底層構建系統仍然希望模塊可以動態加載（因為require()只有在函數執行時才導入模塊）。
相比之下，Rollup 依賴于 ES 模塊，這意味著它可以比 Webpack 更輕松地進行靜態分析，盡管這種差異非常小。但是，使用 Rollup 需要你具有支持 ES 模塊的依賴項。這可能會給不支持ES模塊的庫帶來一些問題，但這些庫現在越來越少了。
最終，由你來決定
雖然我不能為你做決定，但我希望我已經列出了這兩種方法的優缺點。我通常將 Vite（帶有 Rollup）用于新項目，但我沒有看到足夠的好處來吸引我將現有的所有Vue CLI項目遷移到Vite。
在某些時候，這不太重要，因為尤雨溪曾表示，它們會在某個時刻趨于一致（例如，在 CLI 中用 Vite 替換 Webpack）。但就目前而言，這還沒有發生，兩種方法都得到了很好的支持。
