用 Vite 构建 React 应用时如何做性能优化（构建…

在编写、审查或优化基于 Vite 的 React 组件时，按 6 大类 23 条规则优化构建产物、代码分割、开发体验、资源处理、环境变量与包体积。

适用场景

解决思路

1. 构建优化（CRITICAL）：配置 manual chunks 做 vendor 分离（如 vendor: ['react', 'react-dom']）。
2. 构建优化：使用 OXC（默认）或 Terser 进行代码压缩（minification）。
3. 构建优化：将 build.target 设为现代浏览器（baseline-widely-available）。
4. 构建优化：按环境分别配置 sourcemaps（生产环境通常关闭）。
5. 构建优化：确保使用 ESM 以正确进行 tree shaking。
6. 构建优化：启用 Gzip 和 Brotli 压缩。
7. 构建优化：使用基于内容的哈希（asset hashing）做缓存失效。
8. 代码分割（CRITICAL）：用 React.lazy() 做基于路由的拆分。
9. 代码分割：策略性地放置 Suspense 边界。
10. 代码分割：对重型组件使用动态 import()。
11. 代码分割：对非关键组件做懒加载。
12. 代码分割：在 hover/idle/viewport 时预取 chunk（prefetch hints）。
13. 开发体验（HIGH）：配置 optimizeDeps 以加快启动速度（如 include: ['react', 'react-dom']）。
14. 开发体验：遵循 React Fast Refresh 模式。
15. 开发体验：配置 HMR 服务器（如 server.hmr.overlay: true）。
16. 资源处理（HIGH）：做图片优化与懒加载。
17. 资源处理：用 SVGR 将 SVG 作为 React 组件使用。
18. 资源处理：制定 Web 字体加载策略。
19. 资源处理：区分 public 目录与 JavaScript 导入的使用场景。
20. 环境变量（MEDIUM）：客户端变量使用 VITE_ 前缀。
21. 环境变量：使用按 mode 区分的环境文件。
22. 环境变量：绝不在客户端代码中暴露敏感数据。
23. 包分析（MEDIUM）：使用 rollup-plugin-visualizer 分析打包体积。
24. 在 vite.config.ts 中配置 resolve.alias（如 '@' 指向 ./src）、build.chunkSizeWarningLimit: 500、server.port: 3000 等基础项。
25. 在 src/vite-env.d.ts 中通过 ImportMetaEnv 接口声明 VITE_ 环境变量类型。
26. 按 rules/ 目录下的单条规则文件（如 rules/build-manual-chunks.md、rules/split-route-lazy.md、rules/env-vite-prefix.md）查阅详细说明与代码示例。