從 Vite 開始：用下一代建置工具優化前端開發體驗實戰指南

身為前端開發者，你一定經歷過這種無力感：執行 npm run dev 後，看著終端轉圈十幾秒、甚至半分鐘，才終於看到頁面；改了一行程式碼，熱更新（HMR）卻卡頓好幾秒，開發節奏被反覆打斷。這不是你的電腦太慢，而是傳統打包工具「打包整個專案才給你看」的設計使然。本文帶你用 Vite 重啟開發體驗——它號稱「下一代前端建置工具」，核心賣點就是：冷啟動秒開、HMR 毫秒級。

一、為什麼需要 Vite：傳統打包工具的痛點

傳統工具（如 webpack）在開發模式下，會先把專案裡數千個模組全部打包成一棵依賴樹，才啟動伺服器。專案越大，啟動越慢，這是「全域打包」的代價。

重點：開發階段的慢，不是因為程式碼寫得差，而是工具在幫你做「生產環境才需要的優化」。開發時你只想立刻看到畫面，不需要那棵巨大的依賴樹。

二、Vite 的核心原理：原生 ESM + 按需編譯

Vite 換了一條路：

• 開發模式：直接利用瀏覽器原生支援的 ES Module（import），不預先打包；瀏覽器請求哪個模組，Vite 才即時編譯哪個模組。
• 預建優化：對第三方依賴（如 vue、lodash）用 esbuild 預先打包成瀏覽器能吃的格式，啟動時直接快取。
• 生產建置：改用 Rollup 打包，輸出體積小、相容性好的靜態檔。

重點：Vite 開發快靠的是「瀏覽器原生 ESM + 按需編譯」，生產穩靠的是「Rollup 成熟打包」——各取所長。

三、從零搭建一個 Vite 專案（步驟式）

步驟 1：建立專案骨架

npm create vite@latest my-app -- --template vue
cd my-app
npm install

步驟 2：啟動開發伺服器（感受秒開）

npm run dev

打開終端顯示的網址（預設 http://localhost:5173），你會發現幾乎瞬間就看到頁面，第一次啟動也是如此。

四、實戰：配置 vite.config.ts 優化開發體驗

步驟 3：建立設定檔，調整埠號、自動開瀏覽器、設代理：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5173,
    open: true,
    proxy: {
      '/api': 'http://localhost:9082'
    }
  },
  build: {
    target: 'es2020',
    chunkSizeWarningLimit: 1500
  }
})

重點：server.proxy 能在開發時把 /api 請求轉發到後端，避開瀏覽器的跨域（CORS）限制，這是聯調時最好用的功能之一。

五、生產建置與常見優化

步驟 4：打包上線

npm run build
npm run preview

build 輸出到 dist/ 目錄，preview 可用生產模式預覽。若想進一步拆分套件、加快首屏，可加上 manualChunks 把體積大的第三方庫切成獨立 chunk。

六、與框架整合（Vue / React）

Vite 對主流框架都有官方模板：vue、react、react-ts、vanilla-ts 等。你正在用的 Vben Admin 這類企業級框架，底層正是 Vite——理解它，等於理解了你日常專案的「引擎室」。

互動話題：你目前的前端專案是用哪套建置工具？最讓你頭痛的慢點是啟動慢、還是熱更新慢？歡迎留言分享你的優化心得！