react-vite-best-practices

此技能为基于 Vite 构建的现代 React 应用程序提供了全面的性能优化架构。专为旨在实现高性能构建输出、快速开发周期与高效资源交付的前端开发者与软件工程师而设计。本指南汇总了 React 与 Vite 生态系统的各种最佳实践，确保生产环境打包文件保持精简、可扩展且具备高响应性，同时在本地开发与 HMR 阶段维持流畅体验。通过遵循这些规则，团队能确保其架构决策与现代网页开发的行业标准一致。

• 构建优化：包含手动 chunk 配置、OXC 或 Terser 压缩、Tree-shaking 及现代浏览器目标设定，以最小化 bundle 体积。

• 代码分割：实现基于路由的 lazy loading、策略性 React Suspense 边界与动态导入，从而缩短首屏加载时间。

• 开发效率：配置 Vite optimizeDeps 的最佳实践，利用 React Fast Refresh 并调整 HMR 服务器设置。

• 资源处理：优化图像交付策略、使用 SVGR 将 SVG 转为 React 组件、高效 Web 字型加载与 public 目录管理。

• 环境管理：规范 VITE_ 前缀用法、特定模式环境变量，并严格防止敏感信息外泄至客户端代码。

• 打包分析：整合 rollup-plugin-visualizer 以追踪依赖包，识别进一步代码分割或移除无用包的机会。

• 用法：在重构现有组件、设置新 Vite 配置或审核性能指标时使用。通过提供的规则引导代码审查或 Pull Request 评估过程。

• 输入/输出：本技能适用于 React 组件、vite.config.ts 文件或构建流程相关问题。输出包含具体的代码片段、配置调整建议与性能影响说明。

• 限制：主要针对 React 18+ 与 Vite 5+ 工作流程设计；特定插件建议可能会根据项目依赖性有所不同。在进行重大架构变更前，请务必确认其与当前生产构建环境的兼容性。