react-vite-best-practices

此技能為基於 Vite 建構的現代 React 應用程式提供了全面的效能優化架構。專為旨在實現高性能構建輸出、快速開發週期與高效資源交付的前端開發者與軟體工程師而設計。本指南彙整了 React 與 Vite 生態系統的各種最佳實務，確保生產環境打包檔案保持精簡、可擴展且具備高回應性，同時在本地開發與 HMR 階段維持流暢體驗。透過遵循這些規則，團隊能確保其架構決策與現代網頁開發的行業標準一致。

• 建構優化：包含手動 chunk 配置、OXC 或 Terser 壓縮、Tree-shaking 及現代瀏覽器目標設定，以最小化 bundle 體積。

• 程式碼分割：實現基於路由的 lazy loading、策略性 React Suspense 邊界與動態匯入，從而縮短首頁載入時間。

• 開發效率：配置 Vite optimizeDeps 的最佳實務，利用 React Fast Refresh 並調整 HMR 伺服器設定。

• 資源處理：優化影像交付策略、使用 SVGR 將 SVG 轉為 React 元件、高效 Web 字型載入與 public 目錄管理。

• 環境管理：規範 VITE_ 前綴用法、特定模式環境變數，並嚴格防止敏感資訊外洩至用戶端程式碼。

• 打包分析：整合 rollup-plugin-visualizer 以追蹤相依套件，識別進一步程式碼分割或移除無用套件的機會。

• 用法：在重構現有元件、設定新 Vite 配置或審核效能指標時使用。透過提供的規則引導代碼審查或 Pull Request 評估過程。

• 輸入/輸出：本技能適用於 React 元件、vite.config.ts 檔案或建構流程相關問題。輸出包含具體的程式碼片段、配置調整建議與效能影響說明。

• 限制：主要針對 React 18+ 與 Vite 5+ 工作流程設計；特定插件建議可能會根據專案相依性有所不同。在進行重大架構變更前，請務必確認其與當前生產建構環境的相容性。