vite原理：依赖预构建（optimizeDeps）

依赖预构建解决什么问题

如果不做预构建，浏览器会直接请求 node_modules 里的大量模块，可能遇到两类问题：

• CommonJS/UMD 无法被浏览器原生 ESM 直接执行
• 深层依赖太多，网络请求数量暴增

Vite 的做法是：启动时用 esbuild 预处理依赖，把它们转成 ESM，并尽量合并。

预构建产物在哪

通常在：

node_modules/.vite

这里会缓存转换后的依赖模块，下次启动能直接复用。

触发时机

• 首次启动项目
• package.json 依赖变化
• 显式指定 --force 强制重建

关键配置

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    include: ["some-esm-lib"],
    exclude: ["special-lib"],
  },
});

include

强制预构建某些包，适合「扫描阶段没命中但运行会用到」的依赖。

exclude

排除不适合预构建的包，避免兼容问题。

与 build 阶段的区别

optimizeDeps 只作用于开发阶段。
真正上线打包还是走 Rollup 的 build 流程。

常见问题排查

问题 1：启动慢

可能是新依赖过多或缓存失效，先看是否频繁重建 node_modules/.vite。

问题 2：依赖报错（导出不一致）

尝试把异常依赖加入 optimizeDeps.exclude，或升级该依赖版本。

问题 3：偶发缓存脏数据

可以删除 node_modules/.vite 或使用：

vite --force

小结

依赖预构建是 Vite 开发体验的核心加速器。
你可以把它理解为：先把第三方依赖“标准化+缓存化”，再让业务模块按需加载。