React 效能最佳實務

來源狀態

可用來源

資源類型

Skill

與類似 Skill 有什麼不同？

• React 元件組合模式

  React Best Practices 著重 React 效能與實作模式；Composition Patterns 著重元件 API、組合與責任分界。

來源描述的能力

這些是來源描述的可能操作，不代表 2lus 已授予權限或已測試。

尚未列出能力，請審查原始來源。

這個 Skill 是什麼？

依實際效能瓶頸檢查程式，優先處理請求序列與載入成本，而非到處套用 memo。

可以做什麼？何時適合使用？

• 頁面需要等待多個串接請求。
• JavaScript 載入量過大。
• 互動時出現不必要的重新渲染。

如何使用

1. 提供相關元件、資料流程與可觀察的慢點。
2. 要求逐項對照來源規則並給檔案位置。
3. 先修改影響最大的項目，再由專案既有流程比較前後結果。

使用前你需要準備

• 元件與呼叫端程式
• React 版本與效能證據

你可以替換：

[component]、[React version]

環境與相依需求

• React／Next.js 原始碼與可供比較的效能證據。

使用範例與 Prompt

以下是 2lus 撰寫的示範需求；請替換為你有權處理的檔案與專案，不代表已執行或保證結果。

入門

依 React Best Practices 檢查此頁面的資料請求順序，列出有證據的 waterfall 與檔案位置，先不修改。

實務

分析這個 React 路由的大型依賴與動態載入機會，提出最小修改和需要量測的指標。

進階

審查列表互動的重新渲染，區分必要更新與可避免工作；保留行為與可存取性，附驗收方式。

實用提醒

• 不要為了符合規則而加入沒有證據支持的 memoization。

限制與注意事項

• 部分規則只適用 Next.js 或伺服器元件；Vite 專案不能照單全收。

安全注意事項

• 先審查來源與相依工具，只處理獲准的資料；密鑰、個資與登入狀態不得放入提示或公開輸出。

使用與設定

這是官方 repository 的技能集合安裝入口，請在互動選單確認所需 Skill 與 Agent；不代表全平台已驗證。

npx skills add vercel-labs/agent-skills

支援平台

未確認特定 Agent 相容性

來源與授權

來源查核日期（非安全認證）: 2026-09-29

MIT

相關 Skills

• React 元件組合模式
• Web Design Guidelines 介面檢查
• Playwright 網站測試

Source status

Active source

Resource type

Skill

How is this different from similar skills?

• React Composition Patterns

  React Best Practices emphasizes React performance and implementation; Composition Patterns focuses on component APIs, composition and responsibility boundaries.

Documented capabilities

These are operations described upstream, not permissions granted or tested by 2lus.

Capabilities not declared here; review the original source.

What is this skill?

Prioritize evidenced bottlenecks in requests and bundles instead of applying memoization everywhere.

Use cases and when to use it

• A page waits on sequential requests.
• JavaScript loading cost is high.
• Interactions trigger excessive rendering.

How to use it

1. Provide components, data flow and observed slow paths.
2. Request findings tied to source rules and file locations.
3. Address high-impact findings and compare results using project-approved checks.

What you need

• Components and call sites
• React version and performance evidence

You can replace:

[component], [React version]

Environment and dependencies

• React/Next.js source and meaningful performance evidence.

Usage and prompt examples

These example requests were written by 2lus. Substitute files and projects you may use; examples are not executed results or guarantees.

Beginner

Review this page with React Best Practices for evidenced request waterfalls. Give file locations without changing code yet.

Practical

Inspect large dependencies and route-level lazy loading. Propose a minimal patch and metrics to compare.

Advanced

Review list rendering during interaction. Separate necessary updates from avoidable work, preserve accessibility and propose acceptance checks.

Tips

• Do not add memoization without a reason.

Limitations

• Some guidance is Next.js/server-component specific, not universally applicable to Vite.

Security notes

• Review sources/dependencies and process only authorized data; keep credentials, personal data and session state out of prompts and public outputs.

Usage and setup

This is the repository-level installer. Review the selected skills and agent in its prompts; it is not a cross-agent verification claim.

npx skills add vercel-labs/agent-skills

Supported agents

Specific agent compatibility unknown

Sources and license

Source check date (not a safety certification): 2026-09-29

MIT

Related skills

• React Composition Patterns
• Web Design Guidelines
• Playwright