名称: vite 描述: Vite性能优化指南。该技能应在编写、审查或重构Vite配置和项目时使用，以确保最佳性能模式。触发于涉及Vite配置、构建优化、依赖预捆绑、插件开发、包分析或热模块替换问题的任务。
Vite最佳实践
针对Vite应用的全面性能优化指南。包含8个类别下的42条规则，按影响优先级排序，以指导自动化重构和代码生成。
适用时机
在以下情况下参考这些指南：
- 为新项目配置Vite时
- 排查开发服务器启动缓慢问题时
- 优化生产包大小时
- 调试热模块替换问题时
- 编写或评估Vite插件时
- 从Webpack或其他打包工具迁移时
按优先级分类的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 依赖预捆绑 | 关键 | deps- |
| 2 | 插件性能 | 关键 | plugin- |
| 3 | 包优化 | 关键 | bundle- |
| 4 | 导入解析 | 高 | import- |
| 5 | 构建配置 | 高 | build- |
| 6 | 开发服务器 | 中高 | dev- |
| 7 | CSS优化 | 中 | css- |
| 8 | 高级模式 | 中低 | advanced- |
快速参考
1. 依赖预捆绑（关键）
deps-include-large-cjs- 包含具有多个模块的大型依赖项deps-exclude-esm- 排除小型ESM依赖项deps-force-rebundle- 对依赖项更改使用–force标志deps-hold-until-crawl- 配置holdUntilCrawlEnd以控制启动行为deps-entries- 配置自定义入口点以进行发现deps-linked-packages- 在monorepos中处理链接依赖项
2. 插件性能（关键）
plugin-lazy-imports- 在插件代码中使用动态导入plugin-avoid-long-hooks- 避免在启动钩子中执行长操作plugin-transform-early-return- 在transform钩子中提前返回plugin-audit-community- 审核社区插件性能plugin-swc-over-babel- 对React使用SWC而非Babel
3. 包优化（关键）
bundle-manual-chunks- 使用manualChunks进行供应商分割bundle-dynamic-imports- 使用动态导入进行路由级别分割bundle-analyze- 分析包构成bundle-tree-shaking- 启用有效的树摇优化bundle-chunk-warning- 处理大型包警告bundle-compression- 对大型项目禁用压缩大小报告bundle-asset-inlining- 配置资源内联阈值
4. 导入解析（高）
import-avoid-barrel- 避免使用桶文件导入import-explicit-extensions- 使用显式文件扩展名import-path-aliases- 配置路径别名以简化导入import-svg-strings- 将SVG作为字符串而非组件导入import-glob-patterns- 谨慎使用glob导入
5. 构建配置（高）
build-modern-target- 针对现代浏览器build-minification- 使用esbuild进行压缩build-sourcemaps- 在生产环境中禁用源映射build-css-code-split- 启用CSS代码分割build-rolldown- 考虑使用Rolldown以加快构建速度build-output-dir- 配置输出目录和缓存
6. 开发服务器（中高）
dev-server-warmup- 预热常用文件dev-browser-cache- 在开发工具中保持浏览器缓存启用dev-fs-limits- 在Linux上增加文件描述符限制dev-wsl-polling- 对WSL文件监视使用轮询dev-https-proxy- 为开发配置HTTPS和代理
7. CSS优化（中）
css-lightning- 使用Lightning CSS而非PostCSScss-avoid-preprocessors- 尽可能选择CSS而非预处理器css-modules- 使用CSS模块处理组件样式css-inline-critical- 提取关键CSS以提高初始渲染性能
8. 高级模式（中低）
advanced-ssr-externalize- 为SSR外部化依赖项advanced-env-static- 使用静态环境变量advanced-profiling- 分析构建性能advanced-lib-mode- 为包开发配置库模式
使用方法
阅读各个参考文件获取详细解释和代码示例：
参考文件
| 文件 | 描述 |
|---|---|
| AGENTS.md | 包含所有规则的完整编译指南 |
| references/_sections.md | 章节定义和排序 |
| assets/templates/_template.md | 新规则模板 |
| metadata.json | 版本和参考信息 |