vite

Vite 最佳实践

Vite 应用的全面性能优化指南。包含 8 个类别中的 42 条规则，并按影响程度排序，用于指导自动重构和代码生成。

适用场景

在以下情况下参考这些指南：

• 为新项目配置 Vite
• 排查开发服务器启动缓慢的问题
• 优化生产环境打包大小
• 调试 HMR 问题
• 编写或评估 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 - 处理 monorepo 中的链接依赖

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 - 启用有效的 tree-shaking
• bundle-chunk-warning - 处理大型代码块警告
• bundle-compression - 大型项目中禁用压缩后大小报告
• bundle-asset-inlining - 配置资源内联阈值

4. 导入解析（高）

• import-avoid-barrel - 避免从 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 - 在 DevTools 中保持浏览器缓存启用
• dev-fs-limits - 提高 Linux 上的文件描述符限制
• dev-wsl-polling - 使用轮询监视 WSL 文件
• dev-https-proxy - 配置开发环境的 HTTPS 和代理

7. CSS 优化（中）

• css-lightning - 使用 Lightning CSS 替代 PostCSS
• css-avoid-preprocessors - 尽可能优先使用 CSS，而非预处理器
• css-modules - 使用 CSS Modules 编写组件样式
• 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	版本和参考信息