網站效能直接影響使用者留存和轉換率。本次 Nuxt.js 效能優化研討會聚焦前端效能調優的各個環節，從建構設定到執行時優化，從資源載入到渲染策略，全方位提升 Web 應用的響應速度。
效能分析與瓶頸定位
研討會從效能分析工具的使用開始，系統介紹了 Chrome DevTools、Lighthouse 和 WebPageTest 等工具的應用場景。與會者學習如何解讀效能報告，識別關鍵指標如 LCP、FID 和 CLS 的優化空間。透過實際案例分析，大家掌握了從巨觀資料到微觀程式碼的瓶頸定位方法。
建構優化是效能提升的重要環節。專家詳細講解了 Vite 設定優化、程式碼分割策略和依賴預建構技術。透過合理設定 manualChunks，將第三方函式庫按功能模組拆分，實現按需載入。UnoCSS 原子化框架的使用大幅減少了 CSS 體積，相比傳統方案節省了超過 60% 的樣式檔案大小。
SSR 與 ISR 策略優化
服務端渲染策略的選擇對效能影響深遠。研討會深入對比了 SSR、SSG 和 ISR 三種模式的適用場景和效能特徵。對於內容頻繁更新的頁面，ISR 模式能夠在保持快取優勢的同時支援定期重新整理。透過設定 routeRules，可以為不同路徑設定差異化的快取策略，實現效能與時效性的最佳平衡。
資料獲取優化是 SSR 效能的關鍵。專家分享了 GraphQL 查詢優化技巧，包括欄位精簡、批次查詢和快取策略。Nuxt 的 useFetch 和 useAsyncData 組合使用，避免了服務端和客戶端的重複請求。對於靜態內容，預渲染結合 CDN 分發實現了毫秒級的響應速度，顯著提升了使用者體驗。
圖片與媒體資源優化
圖片和媒體資源往往佔據頁面體積的大部分。研討會重點討論了 @nuxt/image 模組的高階用法，包括自動格式轉換、響應式尺寸和懶載入策略。WebP 格式的使用將圖片體積減少了 30% 到 50%，配合 CDN 的圖片處理功能，實現了不同裝置的最優資源交付。
影片播放優化同樣受到關注。Vidstack 播放器配合 HLS 協定實現了自適應位元率串流，根據網路狀況動態調整影片品質。懶載入和預載入策略的合理運用，確保影片內容在需要時快速可用，同時不影響首屏載入速度。與會者透過實際測試資料，直觀感受到優化前後的效能差異。
