測驗：Vite 是什麼？現代前端構建工具入門
共 5 題，點選答案後會立即顯示結果
1. Vite 在開發模式下能夠快速啟動的主要原因是什麼？
2. Vite 使用哪個工具來預打包 node_modules 中的套件？
3. 在 Vite 專案中，index.html 檔案的位置與傳統 Create React App (CRA) 有什麼不同？
4. 為什麼 Vite 在生產環境仍然需要打包程式碼？
5. 下列哪個敘述正確描述了 Vite 的開發模式與生產模式的差異？
一句話說明
Vite（讀音類似「veet」，法文的「快」）是一個現代前端構建工具，讓開發時不用等漫長的打包，直接用瀏覽器原生 ES Modules 跑程式碼。
為什麼需要認識 Vite？
如果你用 AI 輔助開發前端專案，現在有很高機率會看到 Vite。當你叫 AI 幫你建一個 React 或 Vue 專案，它很可能會跑：
npm create vite@latest my-project
Code language: CSS (css)而不是傳統的 create-react-app。看懂 Vite 在幹嘛，你就能：
- 理解 AI 為什麼選這個工具
- 知道開發時那些神奇的即時更新怎麼來的
- 遇到問題時知道該查什麼
傳統打包工具的痛點
Webpack 時代的等待
傳統工具如 Webpack 的運作方式：
你的程式碼 → [Webpack 打包全部檔案] → bundle.js → 瀏覽器執行
↑
這步很慢（10-30 秒）
Code language: CSS (css)痛點一：冷啟動慢
- 專案一大，
npm run dev要等 10-30 秒 - 每次重開電腦都要重新等
痛點二：HMR（熱更新）慢
- 改一行 CSS，等 2-5 秒才看到變化
- 專案越大，等越久
「改一行程式碼 → 等待 → 看結果 → 再改」
↑
這個循環太慢了
Vite 怎麼解決？兩個核心技術
核心技術一：原生 ES Modules
瀏覽器現在原生支援 import，Vite 直接利用這點：
<!-- 傳統方式：全部打包成一個檔案 -->
<script src="bundle.js"></script>
<!-- Vite 方式：讓瀏覽器自己載入模組 -->
<script type="module" src="/src/main.js"></script>
Code language: HTML, XML (xml)// main.js - 瀏覽器會自己處理這些 import
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Code language: JavaScript (javascript)翻譯成白話： 「不打包了！讓瀏覽器自己去抓需要的檔案。你要 A 檔案？瀏覽器自己去拿。要 B 檔案？再去拿。」
核心技術二：esbuild 預打包
有些套件（如 lodash）有幾百個小檔案，讓瀏覽器一個一個抓太慢。Vite 用 esbuild 預先打包這些：
node_modules/lodash/ → [esbuild 預打包] → 一個優化過的檔案
├── add.js
├── map.js
├── filter.js
└── ... (500+ 檔案)
esbuild 為什麼快？
- 用 Go 語言寫的（不是 JavaScript）
- 比傳統打包工具快 10-100 倍
開發模式 vs 生產模式
開發模式（npm run dev）
你的程式碼 → [Vite 伺服器] → 瀏覽器直接用 ES Modules 載入
↑
不打包，秒開！
Code language: CSS (css)- 冷啟動：< 1 秒（對比 Webpack 的 10-30 秒）
- 熱更新：30-50 毫秒（對比 Webpack 的 2-5 秒）
生產模式（npm run build）
你的程式碼 → [Rollup 打包優化] → dist/assets/xxx.js → 部署上線
↑
生產環境還是要打包
為什麼生產環境要打包？
- 把程式碼壓縮變小
- 優化載入順序
- 支援舊版瀏覽器
最小範例：看懂 Vite 專案結構
AI 幫你建的 Vite 專案長這樣：
my-project/
├── index.html ← 入口 HTML
├── package.json ← 專案設定
├── vite.config.js ← Vite 設定（可能沒有，用預設就行）
├── src/
│ ├── main.js ← 程式入口
│ └── App.vue ← 主元件（如果是 Vue）
└── node_modules/ ← 套件們
關鍵檔案：index.html
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="app"></div>
<!-- 注意這個 type="module" -->
<script type="module" src="/src/main.js"></script>
</body>
</html>
Code language: HTML, XML (xml)type="module" 告訴瀏覽器：「這是 ES Module，你自己處理 import」。
關鍵檔案：vite.config.js（如果有的話）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()] // 告訴 Vite 怎麼處理 .vue 檔案
})
Code language: JavaScript (javascript)翻譯： 「用 Vue 的插件，這樣 Vite 就知道怎麼處理 .vue 檔案了」
Vite 適合哪些專案？
很適合
| 情境 | 原因 |
|---|---|
| 新專案 | 預設設定就很好用 |
| Vue / React / Svelte | 官方插件支援完整 |
| 中小型專案 | 開箱即用，不用調設定 |
| 追求開發體驗 | 秒開、秒更新 |
可能要考慮
| 情境 | 原因 |
|---|---|
| 超大型舊專案 | 遷移成本高 |
| 需要特殊 Webpack 插件 | 插件生態不同 |
| 需要 Module Federation | Webpack 特有功能 |
Vibe Coder 檢查點
看到 Vite 專案時，確認這幾點：
1. package.json 裡的 scripts
"dev": "vite" ← 開發用
"build": "vite build" ← 打包用
"preview": "vite preview" ← 預覽打包結果
2. index.html 在根目錄
└── 不是在 public/ 裡面（跟 CRA 不同）
3. 有 type="module"
└── 這是 Vite 能用 ES Modules 的關鍵
4. vite.config.js 看 plugins
└── 知道專案用什麼框架
Code language: PHP (php)常見問題 FAQ
Q: Vite 和 Webpack 能混用嗎？
不行。選一個用就好，現在新專案推薦 Vite。
Q: 為什麼叫 Vite？
法文的「快」（vite），因為它真的很快。創作者是 Vue.js 作者尤雨溪。
Q: 舊專案能換成 Vite 嗎？
可以，但要評估遷移成本。中小型專案通常幾小時能搞定。
本篇重點回顧
| 概念 | 一句話解釋 |
|---|---|
| Vite | 用 ES Modules 讓開發秒開的前端工具 |
| 冷啟動快 | 不預先打包，需要什麼才處理什麼 |
| HMR 快 | 只更新改變的模組，不是全部重來 |
| esbuild | Go 寫的超快打包器，處理 node_modules |
| 開發 vs 生產 | 開發用 ES Modules，生產用 Rollup 打包 |
下一篇預告
【Vite 教學】#02 將介紹如何建立 Vite 專案，以及設定檔的常見選項。
參考資料
- Why Vite | Vite 官方文件
- Vite vs. Webpack: A Head-to-Head Comparison – Kinsta
- Esbuild vs Vite: A Complete Build Tool Comparison | Better Stack
進階測驗：Vite 是什麼？現代前端構建工具入門
測驗目標：驗證你是否能在實際情境中應用所學。
共 5 題，包含情境題與錯誤診斷題。
共 5 題，包含情境題與錯誤診斷題。
1. 你正在開始一個新的 Vue 專案 情境題
你要建立一個新的 Vue 前端專案，追求最快的開發體驗。AI 助手建議你使用以下指令：
npm create vite@latest my-project
為什麼 AI 會推薦 Vite 而不是傳統的 Vue CLI？
2. 檢視 AI 生成的專案結構 情境題
AI 幫你生成了一個 Vite + React 專案。你想確認這是正確的 Vite 專案結構。以下是專案目錄：
my-react-app/
├── index.html
├── package.json
├── vite.config.js
├── src/
│ ├── main.jsx
│ └── App.jsx
└── node_modules/
哪個是確認這是 Vite 專案的關鍵檢查點？
3. 專案要上線部署 情境題
你的 Vite 專案開發完成，準備部署到生產環境。你知道開發時 Vite 用 ES Modules 直接載入，但部署時需要執行哪個指令？
“scripts”: {
“dev”: “vite”,
“build”: “vite build”,
“preview”: “vite preview”
}
要產生可部署的檔案，應該執行哪個指令？為什麼？
4. 專案載入很慢 錯誤診斷
小明發現他的 Vite 專案開發時載入變得很慢，每次頁面重新整理都要等很久。他查看了 Network 面板，發現瀏覽器正在載入數百個小檔案，都來自 node_modules/lodash/ 目錄。
最可能的原因是什麼？
5. 專案無法啟動 錯誤診斷
小華從同事那裡拿到一個 Vite 專案，執行
npm run dev 後瀏覽器開啟了，但畫面一片空白。他檢查了 index.html：
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id=”app”></div>
<script src=”/src/main.js”></script>
</body>
</html>
問題最可能出在哪裡？