認識 Vite
Vite（法文「快速」的意思，發音類似「veet」）是由 Vue.js 作者 Evan You 開發的前端建置工具（build tool）。它解決了傳統打包工具（例如 Webpack）在專案變大後，開發伺服器啟動慢、每次修改都要重新打包的痛點，讓開發時的啟動與熱更新幾乎是即時的。
Vite 已經是 Vue、React、Svelte、Astro、Remix 等主流框架官方推薦或內建的建置工具，也是目前前端生態系最重要的基礎建設之一。
為什麼需要 Vite？
傳統打包工具在啟動開發伺服器前，必須先把整個應用程式的所有模組打包成一個或多個 bundle，專案越大，啟動與重新整理就越慢。Vite 採用兩個關鍵策略解決這個問題：
- 開發模式用瀏覽器原生 ES Modules（ESM）：Vite 開發伺服器不事先打包整個應用，而是讓瀏覽器直接以原生
import載入模組，並依需求即時編譯，所以啟動速度不會隨專案變大而變慢。 - 正式打包用 Rollup／Rolldown：
vite build會呼叫 Rollup（新版本逐步導入以 Rust 撰寫、效能更高的 Rolldown）產出經過壓縮、分包（code splitting）最佳化的靜態資源，適合部署到正式環境。
核心特色
-
極速冷啟動
開發伺服器不需要預先打包，
npm create vite建立的專案通常一兩秒內就能啟動。 -
即時熱更新（HMR）
修改程式碼後，瀏覽器只更新變動的模組，畫面狀態不會重置，回饋速度不受專案大小影響。
-
框架無關
官方提供 React、Vue、Svelte、Preact、Lit、Solid 等範本，也可用於純 JavaScript／TypeScript 專案。
-
相容 Rollup 外掛
Vite 的外掛系統相容 Rollup 外掛介面，社群生態成熟，也能自行撰寫客製化外掛。
最需要掌握的 20%
Vite 的功能很多，但實務上真正常用、決定開發體驗的核心觀念集中在少數幾件事：
- CLI 與專案建立：用
npm create vite@latest建立專案，理解dev／build／preview三個指令分別做什麼。 - 開發伺服器與 HMR：知道 Vite 開發時如何運作、為什麼快，以及 HMR 如何保留元件狀態。
- 正式打包（build）：理解
vite build產出的dist/資源如何用於部署，以及preview如何本機驗證打包結果。 - 靜態資源與 CSS 處理：如何 import 圖片、字型、CSS／Sass，以及
public/與一般 import 資源的差異。 - 環境變數與模式（mode）：
.env系列檔案與import.meta.env如何區分開發、正式環境設定。 vite.config設定檔與外掛：如何客製化 base path、alias、proxy，以及安裝框架或功能外掛。- 框架整合與部署：搭配 React／Vue 等框架開發，並將
dist/部署到 Vercel、Netlify、GitHub Pages 等平台。
掌握以上內容，就足以應付大多數日常專案。本站依照這個順序安排「入門指南」「核心概念」「進階功能」三個章節，建議依序閱讀。
快速開始
瀏覽器開啟終端機顯示的網址（預設 http://localhost:5173），就能看到即時更新的開發畫面。完整步驟見〈安裝與建立專案〉。
推薦影音
Vite 是什麼？60 秒快速認識
簡述：Fireship 出品的極短影片，用一分鐘說明 Vite 解決了什麼問題、為什麼開發速度比傳統打包工具快，適合完全沒接觸過 Vite 的人先建立整體印象。
Vite 的誕生故事（紀錄片）
簡述：2025 年 ViteConf 首映的紀錄片，訪談 Vite 作者 Evan You 及 Svelte、Astro、Solid、Remix 等框架團隊，說明 Vite 如何從 Vue 生態系的內部工具，成長為整個前端社群共用的建置基礎設施；適合想了解 Vite 發展脈絡與設計理念的讀者。