依赖预构建原理

Vite 首次启动时预构建依赖，将非 ESM 格式转换为浏览器可直接加载的 ESM。

预构建目的

目的	说明
ESM 转换	CJS/UMD 依赖转换为 ESM
性能优化	减少模块请求数量
缓存利用	使用 esbuild 高效编译

预构建过程

JavaScript

1. 扫描源码 import 语句
2. 识别依赖包
3. 使用 esbuild 编译依赖
4. 输出到 node_modules/.vite/deps/
5. 记录依赖关系到 _metadata.json

预构建输出

Bash

node_modules/.vite/
├── deps/
│   ├── vue.js         # 转换后的 ESM
│   ├── axios.js
│   └── chunk-xxx.js   # 合并的小依赖
└── _metadata.json     # 依赖元数据

CJS 转 ESM 示例

JavaScript

// CJS 依赖源码
module.exports = { foo: 'bar' }

// 预构建后
export default { foo: 'bar' }

注意：只有首次启动或依赖变化时触发预构建。

强制重新预构建

text

# 删除缓存
rm -rf node_modules/.vite

# 或使用命令
vite --force

预构建触发条件

条件	是否触发
首次启动	✓ 触发
package.json 变化	✓ 触发
lock 文件变化	✓ 触发
--force 参数	✓ 触发
依赖未变化	✗ 不触发

小依赖合并

多个小依赖会被合并成一个 chunk，减少请求：

text

// 多个小依赖合并
import a from 'lib-a'  // 5KB
import b from 'lib-b'  // 3KB
import c from 'lib-c'  // 2KB

// 预构建合并为单个 chunk
// chunk-small-libs.js (~10KB)

要点总结

预构建将 CJS/UMD 转为 ESM
使用 esbuild 提升编译速度
缓存到 node_modules/.vite
小依赖合并减少请求