2020：Vite 與新一代建構工具#

事件#

2020年4月，Evan You（Vue.js 作者）發佈 Vite：利用瀏覽器原生 ESM 與 esbuild（Go 寫的超快轉譯器）實現「即時啟動、閃電熱更新」的開發伺服器與建置工具。

為何重要#

• 終結 webpack 時代的漫長等待：webpack 開發伺服器冷啟動動輒數十秒（因為要先打包整個專案）；Vite 開發時不打包，按需以原生 ESM 供應模組，啟動時間降到毫秒級。
• esbuild 效應：以 Go 並行重寫轉譯/壓縮，證明「用系統語言重寫 JS 工具鏈」可獲得百倍速度，隨後 SWC（Rust）、Turbopack、Rspack、Oxc 等競相出現。
• 原生 ESM 成熟：瀏覽器已全面支援 import/export（2017–2018），建構工具終於可以卸下「模組相容層」的重擔。
• Vite 成為 Vue、React、Svelte、Solid 等框架的事實標準開發環境。

理論與實用原因#

• 理論原因：按需載入（lazy/on-demand）與快取失效最小化理論——只重新轉譯「真正改變的模組」而非整個依賴圖。
• 實用原因：開發者體驗（DX）成為工具競爭的核心指標；「存檔即見」的反饋迴路大幅提升生產力。

彌補了什麼缺陷#

彌補了 webpack「冷啟動慢、設定複雜、HMR 卡頓」的缺陷，也彌補了「生產環境打包」與「開發環境體驗」無法兼得的矛盾（Vite 生產用 Rollup 打包，開發用原生 ESM）。

相關條目#

• 2014-Babel與webpack轉譯時代
• 2013-React與前端框架革命

程式範例#

1. webpack vs Vite：開發模式的根本差異#

// webpack：開發時也要「先打包整個依賴圖」→ 冷啟動數十秒
// bundler 依賴圖：entry → 遞迴解析全部 import → 產出 bundle.js → 才能開始

// Vite：開發時「不打包」，按需以原生 ESM 供應模組 → 毫秒級啟動
// 瀏覽器自己請求：
import { createApp } from "vue";        // 瀏覽器向 dev server 請求此模組
// 只轉譯「當前頁面真正用到的模組」

2. Vite 設定：極簡#

// vite.config.js —— 對照 webpack 動輒數百行的設定
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  server: { port: 5173 }
});

3. HMR：熱更新的精確失效#

// webpack：改一個模組 → 重新打包相關 chunk → 可能整頁刷新
// Vite：改一個模組 → 只重新轉譯該模組 → 毫秒級精確替換
// 存檔即見的反饋迴路

4. 生產建置：開發用原生 ESM、生產用 Rollup 打包#

vite build     # 生產：Rollup 打包 + tree-shaking（搖掉沒用到的程式碼）
vite preview   # 預覽生產版