前端效能優化策略

Core Web Vitals（Google 排名指標）

LCP（Largest Contentful Paint）：最大內容繪製 < 2.5 秒
→ 主要內容多快出現？

FID（First Input Delay）：首次輸入延遲 < 100ms
→ 使用者點擊後多快有反應？

CLS（Cumulative Layout Shift）：累計版面位移 < 0.1
→ 頁面載入時內容有沒有跳動？

載入優化

1. 減少 JS Bundle 大小

// ❌ 載入整個 lodash（70KB）
import _ from 'lodash';
_.debounce(fn, 300);

// ✅ 只載入需要的函式（3KB）
import debounce from 'lodash/debounce';
debounce(fn, 300);

2. 懶載入（Lazy Loading）

// 路由級懶載入
const AdminPage = React.lazy(() => import('./AdminPage'));
// 進入 /admin 路由時才下載 AdminPage 的程式碼

// 圖片懶載入
<img src="photo.jpg" loading="lazy" alt="...">
// 圖片進入視窗才開始載入

3. 壓縮

Gzip / Brotli 壓縮：JS/CSS 體積減少 60-80%
圖片格式：WebP 比 JPEG 小 25-35%，AVIF 更小
字體：只載入用到的字元（中文字體子集化）

渲染優化

重排（Reflow）vs 重繪（Repaint）

重排（Reflow）— 改變幾何屬性（最貴）：
width, height, margin, padding, display, position
→ 重新計算佈局 → 觸發重繪

重繪（Repaint）— 改變外觀屬性（較便宜）：
color, background, visibility, border-color
→ 不需要重新計算佈局

最佳化（Composite）— 只影響合成層（最便宜）：
transform, opacity
→ GPU 處理，不觸發重排或重繪

/* ❌ 觸發重排 */
.animate { left: 100px; } /* 改 left 觸發重排 */

/* ✅ 只觸發 Composite */
.animate { transform: translateX(100px); } /* GPU 加速，不觸發重排 */

React / Vue 的渲染優化

// React：用 React.memo 避免不必要的重新渲染
const ExpensiveList = React.memo(({ items }) => {
    return items.map(item => <Item key={item.id} {...item} />);
});
// 只有 items 真的改變時才重新渲染

// Vue：computed 自動快取
const filteredItems = computed(() => {
    return items.value.filter(i => i.active); // 只有 items 變化時才重新計算
});

網路優化

1. CDN：靜態資源放 CDN（離使用者近）
2. 快取：設定合適的 Cache-Control Header
3. 預載入：<link rel="preload"> 重要資源
4. HTTP/2：多路復用，不需要合併檔案
5. 減少請求：CSS Sprites、Icon Font → SVG Icons

80% 的效能問題來自 20% 的原因。先用 Lighthouse 找出瓶頸，再針對性優化，不要盲目優化。