performance-security

此技能提供了一套完整的生产级 React 开发模式，专注于高性能执行、无障碍设计 (a11y) 及严谨的安全性强化。它专为需要开发大规模、稳健网页应用程序的资深前端工程师与全栈开发人员所设计。此技能通过最新的 React Compiler 模式协助优化组件生命周期，通过 TanStack Router 与 Vite 实现有效的代码分割，并确保通过 WebP 与 SVG 等现代格式实现高性能的资源加载。

除了性能之外，此技能还强调关键的无障碍标准，包括强制执行语义化 HTML、正确使用 ARIA、支持键盘导航以及符合 WCAG 的色彩对比度。安全性模块能协助开发人员避免常见的错误，例如写死机密信息、不安全的环境变量处理以及状态突变的反模式。通过结合使用带有可访问角色查询功能的 React Testing Library，此技能确保安全性与性能提升是通过自动化测试而非手动推测来验证的。

• 使用动态导入与路由级懒加载的高级代码分割技术，以最小化构建包大小。

• React Compiler 优化指导，识别记忆化机会并定义纯组件结构。

• 全面的无障碍审核，包括语义化标记、焦点捕获与屏幕阅读器兼容性验证。

• 使用现代格式与响应式 srcset 模式的图像与资源管道优化。

• 客户端应用程序的安全性最佳实践，包括通过 import.meta.env 进行机密管理。

• 使用 Vite 构建分析与可视化工具进行性能诊断，追踪块大小。

• 确保组件保持纯粹，以利 React Compiler 有效地执行自动记忆化。

• 使用屏幕阅读器测试与浏览器无障碍面板来验证对比度与语义结构。

• 务必将基于 div 的交互式元素替换为原生语义化 HTML 按钮或链接，以维护键盘可操作性。

• 仅使用 VITE_ 前缀的环境变量，以防止机密 API 密钥意外泄露至生产包中。

• 将 rollup-plugin-visualizer 集成至构建流程中，定期检查并移除不必要的依赖。