Vite vs Webpack

本文作者爲奇舞團前端工程開發師

原文作者：Shawn Wildermuth

原文地址：https://www.vuemastery.com/blog/vite-vs-webpack/

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  
          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）。但就目前而言，這還沒有發生，兩種方法都得到了很好的支持。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/_Xz8M_AwSsPP8NmeAAUWYQ

猜你喜歡