在 vite 项目中配置 optimizedeps 需要在 vite.config.js 中导出包含该属性的对象，通过设置 include 数组来强制预构建特定的依赖包。这样做可以解决大型项目启动慢或动态导入导致的白屏问题，确保这些包在开发服务器启动前被 esbuild 处理成 esm 格式。如果未配置，vite 会按需自动发现并预构建首次访问的模块，但手动指定能避免运行时转换带来的延迟。
如何配置 optimizeDeps 以加速特定库加载
要强制预构建某个库，只需在 include 字段中添加其包名。例如，若希望预构建 lodash-es，配置如下：
import { defineConfig } from 'vite';
export default defineConfig({
optimizeDeps: {
include: ['lodash-es'],
},
});当你在代码中 import _ from 'lodash-es' 时，Vite 会在启动阶段就将其转换为 ESM，而不是在浏览器请求时由 Node.js 临时转换。这显著减少了首次加载时间，特别是对于体积较大的库。注意，include 中的包名必须与 package.json 中的名称一致，且通常不需要写路径。
如何处理非 NPM 包或外部资源
对于不在 node_modules 中的文件，或者需要通过特定路径引用的本地脚本，可以使用 entries 或 dirs 来指定扫描范围。更常见的是，如果你有一个位于项目根目录外的共享库，可以通过 deps.serverSsrExternal（Vite 4+）或在旧版本中通过配置来解决，但在 optimizeDeps 上下文中，主要关注的是如何让 Vite 识别并预处理这些依赖。如果依赖是 CommonJS 格式且未被正确转换，也可以显式加入 include。
立即学习“Java免费学习笔记（深入）”；
import { defineConfig } from 'vite';
export default defineConfig({
optimizeDeps: {
// 强制预构建所有在 src 目录下直接引用的 .js 文件
// 注意：entries 通常用于指定入口点，而非直接列出所有依赖
entries: ['./src/main.js', './src/utils/helper.js'],
},
});上述配置告诉 Vite 从指定的入口文件开始分析依赖图，并将所有发现的依赖纳入预构建流程。这对于那些通过动态路径引入、导致 Vite 自动扫描遗漏的模块非常有效。确保路径相对于项目根目录，并且文件确实存在。
optimizeDeps 配置对冷启动速度的具体影响
启用 optimizeDeps 后，Vite 会在每次启动时使用 esbuild 进行预构建，这一步骤会将 CommonJS/UMD 模块转换为 ESM，并扁平化依赖树。对于拥有数百个依赖的大型项目，这一过程可能耗时数秒至数十秒。然而，一旦完成，后续的 HMR（热模块替换）和页面刷新将不再需要重新转换这些模块，从而极大提升交互响应速度。如果不配置 include，Vite 仅在首次访问某个模块时才进行转换，这可能导致用户在首次点击按钮或进入新页面时遇到短暂的白屏或加载卡顿。因此，对于核心业务库，手动配置 include 是平衡启动时间与运行体验的最佳实践。
