- 最小化 'use client'、'useEffect' 和 'setState';优先使用 React 服务器组件 (RSC)。
- 将客户端组件包装在带有回退的 Suspense 中。
- 对非关键组件使用动态加载。
- 优化图像:使用 WebP 格式,包含大小数据,实现延迟加载。
Nextjs Typescript Performance Optimization Rule
性能优化规则,包括最小化客户端代码和优化图像。
Nextjs Typescript Performance Optimization Rule by liaosw97 · b2e51c4
npx skillmds@latest add liaosw97/nextjs-typescript-performance-optimization-rule File contents
---name: nextjs-typescript-performance-optimization-ruledescription: 性能优化规则,包括最小化客户端代码和优化图像。---- 最小化 'use client'、'useEffect' 和 'setState';优先使用 React 服务器组件 (RSC)。- 将客户端组件包装在带有回退的 Suspense 中。- 对非关键组件使用动态加载。- 优化图像:使用 WebP 格式,包含大小数据,实现延迟加载。
liaosw97/awesome-rules-skills/tree/main/plugins/nextjs/skills/nextjs-typescript-performance-optimization-rule commit b2e51c41d6
Frequently asked questions
Run npx skillmds@latest add liaosw97/nextjs-typescript-performance-optimization-rule in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
性能优化规则,包括最小化客户端代码和优化图像。 It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.