測驗：Vite 生產環境打包與部署
共 5 題，點選答案後會立即顯示結果
1. 執行 npm run build 後，打包好的檔案會放在哪個目錄？
2. 打包後的檔名中包含一串類似亂碼的字串（例如 index-CY2Xh8Cq.js），這個字串的用途是什麼？
3. 下列哪種寫法會觸發 Vite 的程式碼分割（Code Splitting）？
4. npm run preview 和 npm run dev 的主要差異是什麼？
5. 如果要將 Vite 專案部署到 GitHub Pages 的子目錄（例如 /my-app/），需要在 vite.config.js 中設定什麼？
前言
在前三篇文章中，我們學會了如何建立 Vite 專案、理解開發伺服器的運作方式，以及設定 vite.config.js。現在是時候把專案推向生產環境了。本篇將帶你認識 Vite 的打包流程，解讀打包後的檔案結構，並實際部署到雲端平台。
學習目標
讀完本篇後，你將能夠：
- 使用
vite build打包生產環境程式碼 - 理解打包輸出的檔案結構
- 部署到 Vercel 或其他靜態網站平台
1. 執行生產環境打包
1.1 基本打包指令
打開終端機，在專案根目錄執行：
npm run build
這個指令實際上是執行 vite build，會將你的專案打包成可部署的靜態檔案。
執行後，你會看到類似這樣的輸出：
vite v5.x.x building for production...
✓ 42 modules transformed.
dist/index.html 0.45 kB │ gzip: 0.29 kB
dist/assets/index-DiwrgTda.css 1.42 kB │ gzip: 0.74 kB
dist/assets/index-CY2Xh8Cq.js 143.58 kB │ gzip: 46.12 kB
✓ built in 1.23s
這告訴我們：
- 總共轉換了 42 個模組
- 產生了 HTML、CSS、JS 三種檔案
- 顯示了每個檔案的原始大小和 gzip 壓縮後的大小
1.2 打包過程發生了什麼？
當你執行 vite build 時，Vite 會：
- 分析依賴關係：掃描所有 import 語句，建立模組依賴圖
- 程式碼轉換：將 JSX、TypeScript、Vue SFC 等轉換為瀏覽器可執行的 JS
- 打包與壓縮：使用 Rollup 將模組打包，並進行 minify 壓縮
- 產生雜湊檔名：在檔名中加入內容雜湊值，確保快取失效正確運作
2. dist 目錄結構解析
打包完成後，會產生一個 dist 目錄。讓我們來看看裡面有什麼：
dist/
├── index.html
├── assets/
│ ├── index-CY2Xh8Cq.js # 主要 JavaScript 檔案
│ ├── index-DiwrgTda.css # 樣式表
│ └── logo-BEjGfK1b.png # 靜態資源
└── favicon.ico
Code language: PHP (php)2.1 檔名中的雜湊值
注意到 index-CY2Xh8Cq.js 這種檔名了嗎？中間那串看起來像亂碼的字串就是內容雜湊值（content hash）。
index-CY2Xh8Cq.js
^^^^^^^^
內容雜湊值
Code language: CSS (css)這個機制的好處是：
- 當檔案內容改變時，雜湊值會跟著變
- 瀏覽器可以安全地長期快取這些檔案
- 部署新版本時，舊的快取會自動失效
2.2 index.html 的變化
讓我們比較開發時和打包後的 index.html：
開發時（src/index.html）：
<script type="module" src="/src/main.jsx"></script>
Code language: HTML, XML (xml)打包後（dist/index.html）：
<script type="module" crossorigin src="/assets/index-CY2Xh8Cq.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DiwrgTda.css">
Code language: HTML, XML (xml)Vite 自動將開發時的原始碼路徑替換成打包後的資源路徑。
3. 程式碼分割與懶載入
3.1 什麼是程式碼分割？
當專案變大時，把所有程式碼打包成一個檔案會導致首次載入很慢。程式碼分割（Code Splitting）可以將程式碼拆成多個小塊，只在需要時才載入。
3.2 動態 import 觸發分割
Vite 會自動對動態 import 的模組進行程式碼分割：
// 這樣寫會觸發程式碼分割
const About = () => import('./pages/About.jsx')
// 使用 React.lazy 也會觸發
const Dashboard = React.lazy(() => import('./pages/Dashboard.jsx'))
Code language: JavaScript (javascript)打包後，你會看到多個 JS 檔案：
dist/assets/
├── index-CY2Xh8Cq.js # 主要程式碼
├── About-Bk3Tz9Xa.js # About 頁面（懶載入）
└── Dashboard-Dq7Wx2Yb.js # Dashboard 頁面（懶載入）
Code language: PHP (php)3.3 如何判斷哪些模組被分割？
查看打包輸出時，注意檔案大小和命名：
dist/assets/index-CY2Xh8Cq.js 143.58 kB # 主要 bundle
dist/assets/About-Bk3Tz9Xa.js 2.34 kB # 分割出來的模組
dist/assets/vendor-Xk9Pz3Qa.js 89.21 kB # 共用的第三方套件
Code language: PHP (php)vendor 開頭的檔案通常是共用的第三方套件，被分離出來以便快取。
4. 預覽生產版本
在部署之前，你可以在本地預覽打包後的成果：
npm run preview
這會啟動一個本地伺服器，提供 dist 目錄的內容：
➜ Local: http://localhost:4173/
➜ Network: http://192.168.1.100:4173/
Code language: JavaScript (javascript)4.1 preview 與 dev 的差異
| 特性 | npm run dev | npm run preview |
|---|---|---|
| 提供內容 | 原始碼（即時編譯） | dist 目錄 |
| 熱更新 | 有 | 無 |
| 效能 | 開發模式 | 接近生產環境 |
| 用途 | 開發 | 部署前驗證 |
重要：npm run preview 只是預覽工具，不是生產環境伺服器。正式部署請使用專門的靜態網站托管服務。
5. 部署到雲端平台
5.1 部署到 Vercel
Vercel 是最簡單的部署選項之一，特別適合前端專案。
步驟一：安裝 Vercel CLI
npm install -g vercel
步驟二：登入 Vercel
vercel login
步驟三：部署
vercel
Vercel 會自動偵測這是 Vite 專案，並執行正確的打包指令。
或者透過 GitHub 整合：
- 將專案推送到 GitHub
- 在 Vercel 網站連結你的 GitHub 帳號
- 選擇要部署的 repository
- Vercel 會自動設定好一切
5.2 部署到 Netlify
Netlify 的流程類似：
透過 CLI：
npm install -g netlify-cli
netlify login
netlify deploy --prod --dir=dist
透過網站：
- 連結 GitHub repository
- 設定 Build command:
npm run build - 設定 Publish directory:
dist
5.3 部署到 GitHub Pages
如果要部署到 GitHub Pages，需要先調整 vite.config.js：
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: '/your-repo-name/' // 設定 base 路徑
})
Code language: JavaScript (javascript)然後可以使用 gh-pages 套件：
npm install -D gh-pages
在 package.json 加入部署腳本：
{
"scripts": {
"deploy": "npm run build && gh-pages -d dist"
}
}
Code language: JSON / JSON with Comments (json)執行部署：
npm run deploy
5.4 各平台比較
| 平台 | 優點 | 適用場景 |
|---|---|---|
| Vercel | 自動偵測框架、預覽部署 | 各種前端專案 |
| Netlify | 表單處理、邊緣函數 | 需要後端功能的專案 |
| GitHub Pages | 免費、與 GitHub 整合 | 個人專案、文件網站 |
6. 常見問題排解
6.1 打包後出現白畫面
可能原因： base 路徑設定錯誤
解決方法： 確認 vite.config.js 中的 base 設定與部署路徑一致
// 如果部署在根目錄
base: '/'
// 如果部署在子目錄
base: '/my-app/'
Code language: JavaScript (javascript)6.2 靜態資源 404
可能原因： 資源路徑使用了絕對路徑
解決方法： 使用 import 或 URL 建構函數
// 不推薦（可能出問題）
<img src="/images/logo.png" />
// 推薦（Vite 會正確處理）
import logo from './assets/logo.png'
<img src={logo} />
Code language: JavaScript (javascript)6.3 打包檔案太大
排查方法： 使用 rollup-plugin-visualizer 分析
npm install -D rollup-plugin-visualizer
// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [
react(),
visualizer({ open: true })
]
})
Code language: JavaScript (javascript)執行 npm run build 後會自動開啟一個視覺化報告，顯示各模組佔用的空間。
總結
本篇介紹了 Vite 生產環境打包與部署的完整流程：
- 打包指令：
npm run build將專案打包到 dist 目錄 - 檔案結構：了解雜湊檔名和資源組織方式
- 程式碼分割：透過動態 import 自動分割程式碼
- 預覽功能：
npm run preview在部署前驗證成果 - 部署平台：Vercel、Netlify、GitHub Pages 各有優勢
至此，【Vite 教學】系列四篇文章全部完成。你已經具備了使用 Vite 進行前端開發的完整知識，從建立專案、理解開發伺服器、設定配置檔，到最終的打包部署。現在就開始用 Vite 建立你的下一個專案吧！
延伸閱讀
進階測驗：Vite 生產環境打包與部署
共 5 題，包含情境題與錯誤診斷題。