用途:为使用 Vite 构建的 React 应用提供性能优化与最佳实践参考,适用于配置 Vite、实现代码分割与懒加载、优化构建产物与包体积、搭建开发环境与 HMR、处理图片字体与静态资源、管理多环境变量、分析依赖体积等任务。版本 2.0.0,采用 MIT 许可。
主要能力:共 23 条规则,分为 6 类并按优先级排列。构建优化(CRITICAL):manual chunks 拆分 vendor、使用 OXC(默认)或 Terser 压缩、面向现代浏览器、按环境配置 sourcemap、ESM tree shaking、Gzip/Brotli 压缩、基于内容哈希做缓存失效。代码分割(CRITICAL):用 React.lazy() 做路由级分割、合理放置 Suspense 边界、对重型组件动态 import()、懒加载非关键组件、按悬停/空闲/视口预取。开发体验(HIGH):配置 optimizeDeps 加速启动、React Fast Refresh 模式、HMR 服务器配置。资源处理(HIGH):图片优化与懒加载、用 SVGR 把 SVG 作为 React 组件、Web 字体加载策略、区分 public 目录与 JS 导入。环境配置(MEDIUM):客户端变量使用 VITE_ 前缀、按 mode 区分环境文件、绝不在客户端代码暴露密钥。体积分析(MEDIUM):用 rollup-plugin-visualizer 分析包。
使用方式:按需阅读各规则文件,如 rules/build-manual-chunks.md、rules/split-route-lazy.md、rules/env-vite-prefix.md;完整展开版见 AGENTS.md。示例配置包含 resolve.alias 别名、build.target 设为 baseline-widely-available、manualChunks 拆分 react/react-dom、optimizeDeps.include、server.hmr.overlay;路由级分割使用 React.lazy 与 Suspense;环境变量通过 vite-env.d.ts 声明 ImportMetaEnv。
限制:资料未提供具体安装命令、适用 Vite 版本下限、各规则的完整代码与量化收益,也未说明是否覆盖服务端渲染或测试相关场景。