performance-security

此技能提供了一套完整的工具組，用於建構符合生產環境要求、高效能且安全的 React 應用程式。專為需要優化資源密集型介面、降低安全性漏洞並確保應用程式無障礙的軟體工程師與前端開發人員所設計。透過將此技能整合至工作流程中，您可以在維持程式碼庫嚴格品質標準的同時，簡化現代 React 模式的實作過程。

• 進階效能優化技術，包括路由層級的程式碼分割 (code-splitting)、透過延遲載入 (lazy loading) 進行手動動態匯入，以及整合 React Compiler 以最小化不必要的重新渲染。

• 資產生命週期管理，專注於 Vite 管道優化，包含影像壓縮、採用 WebP 格式以及響應式圖片處理。

• 安全性加固工作流程，防止敏感資訊外洩，例如正確處理 API 金鑰與環境變數。

• 強健的無障礙 (a11y) 支援，提供關於語意化 HTML 結構、ARIA 標籤、鍵盤導航陷阱以及色彩對比度需求的明確指引。

• 使用 React Testing Library 的整合式測試策略，優先考慮以使用者為中心的查詢方式，而非脆弱的實作細節。

• 使用者在審核現有元件或啟動新的高流量 React 專案時，應套用這些模式。

• 本技能包含專門的效能檢查清單，用於追蹤打包檔 (bundle) 的健康狀況與類似 Lighthouse 的效能指標。

• 無障礙驗證側重於實現 WCAG AA 合規性的實際步驟，包括螢幕閱讀器相容性與焦點管理。

• 使用提供的 React Compiler 指南來編寫更簡潔、無副作用的程式碼，以最大化自動記憶化 (memoization) 的效率。

• 輸入通常涉及現有的 React 元件或路由結構，而輸出則包含優化後的程式碼區塊、安全性修補程式以及無障礙審核的改進建議。