Community生產力與協作github.com

asyrafhussin/react-vite-best-practices

React 與 Vite 效能優化指南。在撰寫、審查或最佳化基於 Vite 建置的 React 元件時使用。觸發於涉及 Vite 配置、建置最佳化、程式碼分割、延遲載入、HMR、打包大小或 React 效能等任務。

react-vite-best-practices 是什麼?

此技能提供了一套全面的 React 與 Vite 效能優化準則,旨在協助開發者撰寫、審查或最佳化基於 Vite 的 React 應用程式。它涵蓋了關鍵的效能領域,包括 Vite 配置最佳化、建置流程改進、程式碼分割與延遲載入、熱模組替換 (HMR) 調校、打包大小分析與精簡,以及 React 層級的渲染效能提升。支援所有使用 Vite 的 React 專案,無論是新的還是現有的。此技能透過具體的規則與範例,引導開發者遵循業界實務做法,例如善用 Vite 的 Rollup 外掛、運用 `React.lazy` 與 `Suspense` 實現元件層級程式碼分割、在構建時將庫進行預打包以減少解析負擔,以及避免常見的 React 效能陷阱。透過套用這些準則,開發者可以顯著減少應用程式的初始載入時間、提升開發體驗中的 HMR 速度,並最終交付更流暢的使用者體驗。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/asyrafhussin/agent-skills/tree/main/skills/react-vite-best-practices

Installed? Explore more 生產力與協作 skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

react-vite-best-practices 是做什麼的?

React 與 Vite 效能最佳化指南。在撰寫、審查或最佳化基於 Vite 建置的 React 元件時使用。觸發於涉及 Vite 配置、建置最佳化、程式碼分割、延遲載入、HMR、打包大小或 React 效能等任務。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相關技能