关键在精准控制optimizedeps.include和exclude:include需手动添加大体积或cjs依赖(如'lodash-es'、'monaco-editor/esm/vs/editor/editor.api'),exclude已为esm或轻量依赖(如vue、dayjs),并善用缓存机制。

关键在 精准控制 optimizeDeps.include 和 exclude,让 Vite 首次启动时只处理真正需要转换的依赖,跳过冗余工作。
明确 include 需要预构建的大体积或 CJS 依赖
Vite 默认会扫描并预构建部分常见依赖,但对动态导入、未显式声明的第三方库(比如通过 import() 加载的 monaco-editor、某些 UI 组件库子包)可能漏检,导致首次加载时才临时构建,拖慢速度。
- 把项目中实际用到、且体积大或格式不标准(如 CommonJS)的依赖,手动加进
include - 典型例子:
'lodash-es'(ESM 版)、'monaco-editor/esm/vs/editor/editor.api'(按需子路径)、'@ant-design/icons-vue' - 避免写模糊路径如
'monaco-editor',它可能触发整包预构建,耗时剧增
合理 exclude 已是 ESM 或轻量级的依赖
有些包天生就是现代 ESM 格式(如 vue、vue-router 4+),或本身极小(如 dayjs、axios),Vite 再去转一次纯属浪费。
- 把这些包列进
exclude,跳过预构建流程 - 注意:排除前确认它确实是 ESM —— 可查
package.json中的"type": "module"或"exports"字段 - 误 exclude 一个 CJS 包,会导致运行时报错“not a module”,需谨慎验证
善用缓存与强制重建机制
预构建结果默认存在 node_modules/.vite,Vite 会自动复用。但缓存也可能成为瓶颈:
- 当
node_modules被重装或依赖版本突变,缓存可能失效,Vite 会自动重建 —— 一般无需干预 - 若怀疑缓存损坏(如启动异常、模块解析错误),可手动删掉
node_modules/.vite目录再启动 - 开发阶段不建议设
force: true,它会让每次启动都清缓存重来,反而更慢;仅在 CI 或调试预构建行为时临时启用
进阶:分离缓存目录(可选)
如果项目频繁重装依赖(例如 CI 环境或多人协作中 node_modules 常被清理),默认缓存易丢失。可将缓存移到项目内更稳定的位置:
- 配置
cacheDir: './.vite_cache',让预构建结果持久化 - 配合
.gitignore忽略该目录,不影响提交 - 对本地开发提升不明显,但在自动化流程中能显著减少重复预构建











