performance-security

此技能提供了一套完整的工具组，用于构建符合生产环境要求、高性能且安全的 React 应用程序。专为需要优化资源密集型界面、降低安全性漏洞并确保应用程序无障碍的软件工程师与前端开发人员所设计。通过将此技能整合至工作流程中，您可以在维持代码库严格质量标准的同时，简化现代 React 模式的实现过程。

• 进阶性能优化技术，包括路由层级的代码分割 (code-splitting)、通过延迟加载 (lazy loading) 进行手动动态导入，以及整合 React Compiler 以最小化不必要的重新渲染。

• 资产生命周期管理，专注于 Vite 管道优化，包含图像压缩、采用 WebP 格式以及响应式图片处理。

• 安全性加固工作流程，防止敏感信息外泄，例如正确处理 API 密钥与环境变量。

• 强健的无障碍 (a11y) 支持，提供关于语义化 HTML 结构、ARIA 标签、键盘导航陷阱以及色彩对比度需求的明确指引。

• 使用 React Testing Library 的整合式测试策略，优先考虑以用户为中心的查询方式，而非脆弱的实现细节。

• 用户在审核现有组件或启动新的高流量 React 项目时，应套用这些模式。

• 本技能包含专门的性能检查清单，用于追踪打包文件 (bundle) 的健康状况与类似 Lighthouse 的性能指标。

• 无障碍验证侧重于实现 WCAG AA 合规性的实际步骤，包括屏幕阅读器兼容性与焦点管理。

• 使用提供的 React Compiler 指南来编写更简洁、无副作用的代码，以最大化自动记忆化 (memoization) 的效率。

• 输入通常涉及现有的 React 组件或路由结构，而输出则包含优化后的代码块、安全性补丁以及无障碍审核的改进建议。