关于 vite-react-best-practices
vite-react-best-practices 是一份面向生产级 Vite 单页应用的 React 指南,涵盖部署、性能、项目结构和故障排查;完整规则见 AGENTS.md。
主要功能
- 01单页应用重写与缓存指南
- 02构建验证和环境变量规则
- 03React 路由拆分与状态管理建议
- 04组件性能和图像优化
- 05按功能组织项目及故障排查
适用场景
- 01搭建 Vite 与 React 项目
- 02配置单页应用部署和 CI/CD
- 03排查构建或缓存问题
- 04重构组件以提升性能
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ claudiocebpaz/ vite-react-best-practices --skill vite-react-best-practices安装后在 Claude Code 中输入/vite-react-best-practices确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
README.mdmetadata.jsonAGENTS.mdmarketplace.jsonrules/react-image-optimization.mdreact-colocation.mdanti-import-dist.mdreact-memoization.mdreact-route-splitting.mdreact-server-state.mdvite-build-validation.mdvite-caching-strategy.mdvite-env-vars.mdvite-troubleshooting.mdvite-spa-rewrites.md详细介绍
Vite React 最佳实践
面向资深开发者的指南,介绍如何使用 Vite 构建可用于生产环境的 React 单页应用(SPA)。
适用场景
在以下情况下,请参考这些指南:
- 搭建新的 Vite + React 项目
- 配置 SPA 的构建流水线和 CI/CD
- 排查生产构建或缓存问题
- 重构 React 组件以提升性能
规则类别
1. Vite SPA 部署(关键)
2. React 核心性能
3. 架构与清理
- 同地管理 - 基于功能的结构。
- 反模式:从 Dist 导入 - 避免重复打包。
- 故障排查 - 常见的 Vite 修复方案。
完整汇编文档
如需查看包含所有展开规则的完整指南:AGENTS.md
评论
支持 Markdown