vite 依赖预构建的核心做法是使用 esbuild 将 commonjs 或 umd 格式的第三方库一次性转译为 es module，并缓存到 node_modules/.vite 目录中。这样做能显著减少浏览器加载时的请求数量并提升冷启动速度，因为 esbuild 的转换速度远快于浏览器原生解析。如果项目中存在未处理的循环依赖或 esbuild 无法识别的语法，预构建可能会失败或产生运行时错误。
为什么 Vite 需要预构建依赖
Vite 在开发模式下直接提供源码，但浏览器目前对非标准模块格式的支持有限。大多数 npm 包仍使用 CommonJS (require/module.exports) 或 UMD 格式，而 Vite 期望所有模块都是标准的 ES Module。此外，一个大型项目可能引入几十个甚至上百个依赖，如果每个文件都向服务器发起单独请求，网络开销会极大拖慢页面加载。预构建过程将这些分散的文件合并为少数几个经过 esbuild 优化的 ESM 文件，解决了兼容性和性能问题。
import { createApp } from 'vue';
import App from './App.vue';
// 这是一个典型的 Vite 入口文件
createApp(App).mount('#app');
上述代码展示了 Vite 应用的典型入口。当 Vite 启动时，它会扫描这些 import 语句。对于本地文件如 ./App.vue，Vite 会将其转换为 JavaScript 并处理 CSS。但对于像 vue 这样的外部依赖，Vite 不会直接读取其原始文件，而是先检查缓存中是否存在预构建版本。如果存在且未过期，直接返回缓存；如果不存在，则触发预构建流程，调用 esbuild 进行处理。
预构建的具体执行流程
预构建发生在 Vite 服务器启动阶段。Vite 首先收集所有被引用的外部依赖列表，然后调用 esbuild 进行批量转换。esbuild 会将 CommonJS 包装器移除，并将 require 调用替换为对应的 import 语句。转换完成后，结果会被写入磁盘缓存。后续请求命中缓存时，Vite 直接响应这些预构建后的文件，从而避免了重复转换。
// vite.config.js
export default {
optimizeDeps: {
include: ['lodash-es', 'axios'],
exclude: ['my-local-lib']
}
};
开发者可以通过 vite.config.js 中的 optimizeDeps 选项手动干预预构建行为。例如，强制包含某些未被直接引用但动态加载的依赖，或者排除那些不需要预构建的大型库。这种细粒度控制有助于解决特定的兼容性痛点或优化构建策略。
预构建失败或缓存过期的常见原因
预构建并非总是顺利。如果依赖包内部存在循环依赖，esbuild 可能无法正确解析模块关系，导致预构建报错。此外，当依赖包的 package.json 或源代码发生变动时，Vite 会检测到变化并清除旧缓存，重新触发预构建。另一个常见问题是某些库使用了 esbuild 不支持的高级 JavaScript 特性或特定平台 API，这会导致转换失败。此时，开发者需要检查控制台日志，定位具体的错误模块，并考虑通过 exclude 配置绕过预构建，但这通常会牺牲开发服务器的启动速度。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
