用途:为构建快速、无障碍且安全的 React 应用提供生产级实践模式,适用于性能优化或安全审查场景。
主要能力: 性能方面,介绍基于 TanStack Router 的按路由自动代码分割,以及用 React.lazy 与 Suspense 手动懒加载重型组件、路由级懒加载;强调 React Compiler 优先,保持组件纯净、渲染期派生值、属性可序列化,并可通过 React DevTools 的 Memo ✨ 徽章验证优化。资源优化涵盖 Vite 资源管线、WebP/SVG 现代格式、图片懒加载与响应式 srcSet,以及使用 rollup-plugin-visualizer 分析打包体积。还提供性能检查清单,包括路由加载器预取、TanStack Query 去重与 staleTime、gzip/brotli 压缩。 无障碍方面,强调语义化 HTML、仅在必要时使用 ARIA、键盘导航与焦点管理(如对话框 Escape 关闭)。测试建议使用 React Testing Library 的可访问查询(按 role/label)。颜色对比度要求正文 4.5:1、大字 3:1,并给出无障碍检查清单。 安全方面,强调不提交密钥,仅 VITE_* 环境变量暴露给客户端;用 Zod 校验边界数据与用户输入;指出 dangerouslySetInnerHTML 风险,必要时用 DOMPurify 净化;配置 CSP 头;固定依赖版本并定期审计,使用 Renovate/Dependabot,CI 中用 --ignore-scripts 并扫描密钥。
使用方式:按技能提供的模式编写 React 代码,结合给出的命令(如 pnpm audit、pnpm install --ignore-scripts)执行检查。
限制:资料未提供具体收费、价格或平台信息。