Nevermind

從 Webpack 到 Vite：一次平順的遷移之旅

4 分鐘

1. 為什麼要遷移？Webpack 的痛點

Webpack 是一個極其強大且可設定的模組打包工具，多年來一直是前端專案的基石。但隨著專案規模增長，其以「打包」為核心的思路也帶來了效能瓶頸：

  • 緩慢的冷啟動：每次啟動開發伺服器（dev-server），Webpack 都需要遍歷整個相依性圖，將所有模組打包到記憶體中。這個過程在大型專案中可能花費數分鐘。
  • 緩慢的熱更新（HMR）：當你修改一個檔案時，Webpack 需要重新計算相關模組並進行替換。雖然比整個頁面重新整理更快，但在大型專案中，這個過程的延遲也可能達到數秒甚至十幾秒，打斷開發心流。

2. Vite 如何解決這些問題？

Vite（法語意為「快」）另闢蹊徑。它利用現代瀏覽器對原生 ES 模組（ESM）的支援，將建置過程分成兩部分：

  • 開發時：Vite 啟動一個伺服器，但不會預先打包所有模組。相反地，它會攔截瀏覽器的模組請求，按需轉換並提供原始碼。例如，瀏覽器請求 main.js，Vite 提供它；main.js 匯入了 Button.vue，瀏覽器再次發起請求，Vite 再提供轉換後的 Button.vue。這使開發伺服器幾乎能瞬間啟動。
  • 正式環境：Vite 使用 Rollup（同樣高效的打包工具）進行打包，以獲得高度最佳化的靜態資源。

這種模式徹底改變了開發體驗，帶來閃電般的啟動速度和毫秒級熱更新。

3. 遷移實作步驟

將一個現有 Webpack 專案遷移到 Vite，通常涉及以下步驟：

a. 安裝相依套件並建立設定檔

首先，安裝 Vite：

pnpm add -D vite @vitejs/plugin-react # 或 @vitejs/plugin-vue

然後在專案根目錄建立 vite.config.js：

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react()],
})

b. 移動 index.html

Webpack 通常將 index.html 放在 public 目錄下，並自動注入打包後的 JS。Vite 則將 index.html 視為應用程式的進入點。你需要將它移到專案根目錄，並手動加入指令碼參照：

<!-- /index.html -->
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

c. 替換 Webpack 外掛

你需要找到 Webpack Loaders 和 Plugins 所對應的 Vite 外掛。社群生態非常豐富，大部分需求都能找到解決方案。

WebpackVite
babel-loader@vitejs/plugin-react（內建 Babel）
vue-loader@vitejs/plugin-vue
file-loaderVite 內建支援
webpack-dev-serverVite 內建開發伺服器

d. 處理環境變數

在 Webpack 中，我們習慣使用 process.env.NODE_ENV。在 Vite 中，需要透過 import.meta.env 來存取環境變數，例如 import.meta.env.VITE_API_URL。

e. 設定路徑別名

在 vite.config.js 中設定路徑別名非常簡單：

import path from 'node:path'
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

4. 遷移後的成果

遷移到 Vite 後，最直觀的感受就是快。

  • 開發伺服器啟動時間從 50 秒縮短到 2 秒。
  • 熱更新時間從平均 3–5 秒降低到幾乎無感的數十毫秒。
  • 設定檔（vite.config.js）相比 webpack.config.js 大幅簡化。

結論

雖然遷移過程可能需要處理一些專案特有的設定問題，但從 Webpack 遷移到 Vite 所帶來的開發體驗提升非常巨大。如果你還在忍受緩慢的建置過程，那麼現在就是擁抱 Vite 的最佳時機。

Vite Webpack 建置工具 遷移