vite-react-best-practices
Vite + React 生产级应用开发最佳实践指南
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：vite-react-best-practices。 它的用途是：Vite + React 生产级应用开发最佳实践指南 完整的 Skill 内容见：https://321skill.com/skills/vite-react-best-practices/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用Vite+React开发一个后台管理系统，准备部署到Nginx，有什么需要特别注意的部署配置吗？” 它会引导你参考本指南中的“Vite SPA部署”部分，重点强调必须配置`try_files`规则来处理前端路由，并设置正确的HTTP缓存头（如index.html禁用缓存，静态资源长期缓存），以避免出现404错误和资源更新问题。
介绍
本指南旨在解决开发者在构建 Vite + React 单页应用（SPA）时，从项目初始化到生产部署全链路中遇到的性能、架构和部署难题。它提供了具体的配置规则、代码模式和排错方案，将散落各处的经验系统化。
使用方式非常直接：开发者可以在新建项目、配置构建流程、审查代码或排查生产环境问题时，查阅对应的规则章节，例如“Vite SPA部署”或“React核心性能”，并参考其提供的具体文件（如 SKILL.md 或 AGENTS.md）进行实施。
它主要面向有一定 React 和 Vite 使用经验的中高级前端开发者、技术负责人以及需要进行代码重构或性能优化的工程师。对于初学者，它是一份极佳的学习路线图。
与零散的博客文章或官方基础文档相比，本指南的核心区别在于其“生产级”和“全链路”视角。它并非简单介绍功能，而是聚焦于如何将 Vite 和 React 组合起来，构建出高性能、易维护、可稳定部署的真实应用，并特别强调了 SPA 部署时的关键陷阱（如路由重写）和缓存策略。
核心特点
本指南深度融合了 Vite 构建工具特性与 React 应用性能模式，提供了从开发配置到静态服务器部署的端到端解决方案，尤其针对 SPA 的部署陷阱（如路由重写、缓存策略）给出了强制性规则，这是许多通用 React 最佳实践指南所缺失的。
注意事项
本指南主要针对使用 Vite 构建的 React 单页应用（SPA），不适用于服务端渲染（SSR）框架（如 Next.js）或非 React 技术栈。
常见问题
Vite React 项目部署后页面刷新 404 怎么办？
这是 SPA 常见问题，需配置静态服务器将所有路由重定向到 index.html，指南中“Vite SPA部署”章节的“静态重写”规则提供了具体解决方案。
如何优化 Vite + React 应用的首次加载速度？
指南建议采用路由懒加载（代码分割）、配置正确的长期缓存策略（哈希文件名）以及优化图片资源，具体见“React核心性能”和“Vite SPA部署”章节。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vite-react-best-practices/raw/index.md 读取 vite-react-best-practices 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vite-react-best-practices/raw/index.md（查看排版版本）