Vite 或 Vue CLI，我該選擇哪一個(gè)

2022-09-30 09:33:55

在本文中，我們將深入探討 Vite 與 Vue CLI，以便你可以根據(jù)自己的需求做出最佳選擇。

隨著 Vue 生態(tài)系統(tǒng)的成熟，已經(jīng)引入了許多新技術(shù)。雖然一些開(kāi)發(fā)人員可能從一個(gè)普通的 JavaScript 文件開(kāi)始，并在頁(yè)面中包含 Vue。但隨著時(shí)間的推移，在開(kāi)發(fā) Vue 應(yīng)用程序時(shí)，使用打包工具和命令行界面成為更加標(biāo)準(zhǔn)的開(kāi)發(fā)流程。

Vue 不會(huì)強(qiáng)制你選擇某種開(kāi)發(fā)、打包方式，但vue的生態(tài)系統(tǒng)提供了許多工具，例如 Vue CLI 和最近的推出的Vite js。那么你應(yīng)該使用 Vite 還是 Vue CLI？在做出選擇的時(shí)候，了解 Vite 和 Vue CLI 之間的區(qū)別會(huì)對(duì)我們有很大的幫助。

在本文中，我們將深入探討 Vite 與 Vue CLI，以便你可以根據(jù)自己的需求做出最佳選擇。

Vue CLI 是如何工作的？

Vue 命令行界面 (CLI) 圍繞 Webpack 創(chuàng)建一個(gè)包裝器來(lái)編譯你的 Vue 項(xiàng)目。但是我們?yōu)槭裁匆幾g它呢？在 Webpack 和 Rollup 這樣的打包工具出現(xiàn)之前，我們只需要將我們的 JavaScript 文件部署到服務(wù)器并將它們?nèi)堪谝粋€(gè)頁(yè)面上。當(dāng)我們的項(xiàng)目很小的時(shí)候，這種效果很好。但是隨著 Vue 的發(fā)展，我們開(kāi)始需要某種程度的打包功能。單文件組件 (SFC) 和 TypeScript的使用都需要借助打包工具來(lái)構(gòu)建我們的項(xiàng)目。這就是為什么要引入Vue CLI 。

Vue CLI 允許我們?cè)陂_(kāi)發(fā)和生產(chǎn)期間創(chuàng)建和構(gòu)建項(xiàng)目。CLI 隱藏了 Webpack 的復(fù)雜配置細(xì)節(jié)，并在開(kāi)發(fā)和生產(chǎn)過(guò)程中為我們的項(xiàng)目提供服務(wù)。但是，如果我們想要將它與 Vite 進(jìn)行比較，那就讓我們?cè)偕钊胍稽c(diǎn)。

Webpack

正如 Webpack 網(wǎng)站所描述的，Webpack 是一個(gè)靜態(tài)模塊打包工具。但是，這是什么意思？Webpack 的主要目標(biāo)是獲取你的 Web 項(xiàng)目的資產(chǎn)并將它們打包到少量文件中以供瀏覽器下載。這并不意味著立即加載項(xiàng)目的所有文件，也可以按需下載。

雖然 Webpack 可以打包非代碼資產(chǎn)，但它真正的閃光點(diǎn)是打包相關(guān)的代碼。你可以認(rèn)為打包就是簡(jiǎn)單地將所有代碼文件（例如JavaScript/TypeScript）合并在一起，但實(shí)際上這里還有更多的內(nèi)容。

Webpack 處理代碼中的 imports/require 語(yǔ)句時(shí)，只包含實(shí)際需要的文件。此外，它經(jīng)常進(jìn)行“tree-shaking”，這可以刪除實(shí)際上從未引用過(guò)的代碼塊（例如類、函數(shù)）。通過(guò)這種方式，Webpack 可以非常高效地打包你的項(xiàng)目。但是，如果我們正在研究 Vue CLI（包含 Webpack）與 Vite 的比較，我們需要繼續(xù)看看在開(kāi)發(fā)時(shí)會(huì)發(fā)生什么。

開(kāi)發(fā)過(guò)程中的 Webpack

在 Vue CLI 中，Webpack 用于模塊綁定。在開(kāi)發(fā)時(shí)也會(huì)發(fā)生這種綁定。當(dāng)你通過(guò) CLI 開(kāi)發(fā) Vue 項(xiàng)目時(shí)，它會(huì)指示 Webpack 以增量方式構(gòu)建項(xiàng)目并監(jiān)聽(tīng)更改，以便它可以將更改的文件打包并在瀏覽器中進(jìn)行替換。因?yàn)闃?gòu)建包是增量的，所以它可以在你開(kāi)發(fā)項(xiàng)目時(shí)快速的將更改同步。第一次構(gòu)建項(xiàng)目時(shí)可能會(huì)較慢（即 3 秒或更長(zhǎng)時(shí)間，具體取決于你的項(xiàng)目大小），但一旦項(xiàng)目啟動(dòng)，增量更改的同步會(huì)非常快（即 < 1 秒，通常小于 100 毫秒）。

Vite js 是如何工作的？

如果你是Vite的新手，我建議直接從它的創(chuàng)造者尤雨溪那里學(xué)習(xí)，他在Vue Mastery的課程“使用vite快速構(gòu)建”中教我們關(guān)于Vite的知識(shí)。

如果你看過(guò)該課程的第一課（它是免費(fèi)的），你將了解如何開(kāi)始，但在我們將其與 Vue CLI 和 Webpack 進(jìn)行比較之前，我們需要了解 Vite 的工作原理。

當(dāng)你創(chuàng)建一個(gè)基本的 Vite 項(xiàng)目（在我們的例子中，是 Vue 3 的 Vite 項(xiàng)目）時(shí)，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>

你會(huì)注意到這與 Vue CLI 看起來(lái)很相似，但有一個(gè)主要例外：script標(biāo)記使用type="module“。除非你使用 TypeScript，否則這里沒(méi)有真正的構(gòu)建步驟。src腳本指向你的實(shí)際源代碼文件。

當(dāng)這個(gè)請(qǐng)求傳入時(shí)，它會(huì)將main.js文件作為原生 ES 模塊發(fā)送到瀏覽器。這意味著它根本不會(huì)打包你的代碼。實(shí)際上，源文件只是一個(gè)簡(jiǎn)單的Vue啟動(dòng)文件：

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')

這里發(fā)生了什么？Vite 正在利用原生 ES 模塊和動(dòng)態(tài) ESM 模塊，以便根據(jù)需要將代碼注入瀏覽器。本質(zhì)上，項(xiàng)目中的每次導(dǎo)入都會(huì)強(qiáng)制瀏覽器根據(jù)需要加載每個(gè)有效負(fù)載。這些導(dǎo)入將級(jí)聯(lián)以獲得特定情況下所需的所有代碼。

這意味著在開(kāi)發(fā)過(guò)程中， Vite 不但為你的網(wǎng)站提供服務(wù)，并且它也支持動(dòng)態(tài)加載（在支持它的新瀏覽器中，并且也兼容舊瀏覽器）。

此外，Vite 在你開(kāi)發(fā)項(xiàng)目時(shí)使用模塊熱替換 (HMR) 來(lái)更新修改的代碼。使你能夠在開(kāi)發(fā)時(shí)獲得即時(shí)的啟動(dòng)速度，這會(huì)大大提高開(kāi)發(fā)體驗(yàn)。

但是 Vite 是如何在生產(chǎn)環(huán)境中實(shí)現(xiàn)這一點(diǎn)的呢？讓我們來(lái)看看。

Vite 和生產(chǎn)環(huán)境

雖然 Vite 在開(kāi)發(fā)過(guò)程中使用其提供文件的能力來(lái)加速該過(guò)程，但 Vite 本身并沒(méi)有真正打包你的項(xiàng)目。相反，它依賴于一個(gè)名為"Rollup"的打包程序來(lái)進(jìn)行實(shí)際的打包。

通過(guò)使用Vite中的build命令，它將使用rollup來(lái)構(gòu)建你的項(xiàng)目：

命令行

> vite build

這將構(gòu)建項(xiàng)目，生成幾個(gè)文件（使用校驗(yàn)和以避免緩存的影響）：

命令行

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 允許通過(guò)配置文件配置 Rollup（配置文件具有非常合理的默認(rèn)值）：

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 進(jìn)行配置。vite.config.js中的選項(xiàng)允許你在必要時(shí)對(duì)Rollup進(jìn)行深入配置。

因此，使用 Vite 實(shí)際上為你提供了兩種不同的體驗(yàn)：在開(kāi)發(fā)時(shí)的快速調(diào)試體驗(yàn)；遵循 Rollup 規(guī)范，允許你以想要的方式構(gòu)建項(xiàng)目。

當(dāng) Vite 使用Rollup時(shí)， Rollup不是必需的。你可以使用任何你想要的打包工具代替 Rollup 來(lái)構(gòu)建你的 Vue 項(xiàng)目。

Vite 或 Vue CLI：我應(yīng)該選擇哪個(gè)？

這個(gè)問(wèn)題沒(méi)有一個(gè)明確的答案，Vite 還是 Vue CLI 哪個(gè)更好？

但我想把它分成兩個(gè)不同的討論：在開(kāi)發(fā)中使用和在生產(chǎn)中使用。

開(kāi)發(fā)時(shí)

Vue CLI（以及擴(kuò)展的 Webpack）和 Vite 的整體體驗(yàn)在開(kāi)發(fā)過(guò)程中可能是相似的。兩者都增量構(gòu)建你的項(xiàng)目并使用模塊熱替換來(lái)替換運(yùn)行的項(xiàng)目中改動(dòng)的代碼。

兩者的區(qū)別歸結(jié)為速度。Webpack 從源代碼構(gòu)建項(xiàng)目，并在開(kāi)發(fā)項(xiàng)目時(shí)持續(xù)進(jìn)行增量構(gòu)建。

另一方面，Vite 會(huì)根據(jù)需要將實(shí)際代碼加載到瀏覽器中。這意味著不需要太多源代碼的映射，因?yàn)樵跒g覽器中運(yùn)行的代碼就是你正在使用的實(shí)際代碼（和文件）。這意味著，在大多數(shù)情況下，你會(huì)發(fā)現(xiàn) Vite 比 Vue CLI 提供更快速和直接的開(kāi)發(fā)和調(diào)試體驗(yàn)。在 Vue CLI 中，你調(diào)試的是Webpack 生成的代碼（通過(guò)使用源代碼映射），而不是調(diào)試的你正在編寫的代碼。

另一個(gè)好處是 Vite 不依賴于 Vue.js。Vite 可以在不同的環(huán)境中使用：純 JavaScript、React、PReact 和 SvelteKit。因此，如果你在多個(gè)環(huán)境中工作，則可以更輕松地使用（和配置）一個(gè)工具來(lái)處理不同的項(xiàng)目。

生產(chǎn)時(shí)

Rollup 類似于 Webpack（以及Parcel，另一個(gè)流行的打包工具），盡管它們的工作方式有點(diǎn)不同。

Webpack基于CommonJS API來(lái)管理JavaScript模塊。即使 Webpack 支持 ES 模塊，底層構(gòu)建系統(tǒng)仍然希望模塊可以動(dòng)態(tài)加載（因?yàn)閞equire()只有在函數(shù)執(zhí)行時(shí)才導(dǎo)入模塊）。

相比之下，Rollup 依賴于 ES 模塊，這意味著它可以比 Webpack 更輕松地進(jìn)行靜態(tài)分析，盡管這種差異非常小。但是，使用 Rollup 需要你具有支持 ES 模塊的依賴項(xiàng)。這可能會(huì)給不支持ES模塊的庫(kù)帶來(lái)一些問(wèn)題，但這些庫(kù)現(xiàn)在越來(lái)越少了。