用途:这是一份 React 19 组件模式与 Vite 性能优化指南,适用于编写、审查或优化基于 Vite 构建的 React 组件,也可在配置 Vite、实现代码分割与懒加载、优化构建产物与包体积、搭建开发环境、排查性能问题时参考。
主要能力:包含 9 大类 40+ 条规则,按影响优先级排列并带前缀。关键规则包括:React 19 模式(始终从 react 使用具名导入,ref 作为普通 prop 使用、不再用 forwardRef,禁止默认导入或命名空间导入;注意不要重构 src/components/ui/ 中已有的 shadcn forwardRef);构建优化(manual chunks 拆分 vendor、Terser 压缩、面向现代浏览器、sourcemap、输出结构与 chunk 体积警告);代码分割(React.lazy 路由级拆分、Suspense 边界、动态导入、预加载关键 chunk、命名 chunk、vendor 分离);开发性能(依赖预打包、排除大依赖、预热常用模块、dev server 配置、HMR 错误浮层);资源处理(内联阈值、public 目录、导入语法、SVG 组件、图片与字体加载);环境配置(VITE_ 前缀、类型定义、按模式区分、避免泄露敏感数据、构建时替换);HMR 优化;包分析(rollup-plugin-visualizer、依赖体积、tree shaking、死代码、CSS 拆分);进阶模式(SSR、库模式、多页、Web Worker、WebAssembly)。
使用方式:按需阅读各规则文件(如 rules/build-manual-chunks.md、rules/split-route-lazy.md、rules/_sections.md),每个规则文件包含原因说明、错误示例与正确示例及补充参考。资料中给出了推荐的 vite.config.ts 配置、路由级代码分割示例与环境变量类型定义示例。
适用场景:React 19 + Vite 项目的新组件开发、代码审查、构建与包体积优化、开发体验调优。
限制:资料未提供安装命令、收费方式、平台支持范围或量化效果数据;规则以英文原文给出,具体项目需结合实际情况判断。