Vite 依赖预构建

🎯 引言

学会这篇文章，你能理解为什么 Vite 第一次启动时有时会“预处理依赖”，以及如何通过 optimizeDeps 配置控制这个过程。这个知识点能帮你解决不少开发时遇到的奇怪报错。

🧱 为什么需要预构建

Vite 开发时依赖浏览器原生 ES Module。很多 npm 包发布的是 CommonJS 格式（require/module.exports），浏览器不直接支持。Vite 会在第一次启动时把这些包转换成 ES Module，并合并成少量文件，这个过程就叫依赖预构建。

想象你去食堂吃饭：

• 没有预构建：每次点一个菜，厨师现做，排队很慢。
• 有预构建：食堂提前把热门菜做好，你直接拿，速度快很多。

预构建后的文件会缓存在 node_modules/.vite 目录中。只要不升级依赖，下次启动就不需要重新构建。

✨ 默认行为

首次运行 npm run dev 时，你可能会看到终端输出：

Pre-bundling dependencies: vue, element-plus

这表示 Vite 正在扫描入口文件，并把用到的第三方依赖进行预构建。

🛠 手动控制预构建

include

如果 Vite 没有自动发现某些依赖，可以手动告诉它：

import { defineConfig } from 'vite';

export default defineConfig({
    optimizeDeps: {
        include: ['lodash-es', 'axios'],
    },
});

exclude

某些包已经提供原生 ES Module，不需要预构建，可以排除：

import { defineConfig } from 'vite';

export default defineConfig({
    optimizeDeps: {
        exclude: ['vue-demi'],
    },
});

force

有时候缓存出了问题，可以强制重新预构建：

vite --force

或者：

npx vite --force

这会删除 node_modules/.vite 缓存并重新构建。

🛠 一个常见场景

你引入了一个较大的组件库，但只用到其中几个组件：

import { ElButton } from 'element-plus';

Vite 默认会预构建整个 element-plus。如果你希望只构建用到的部分，可以配合组件库的 ES Module 版本或按需引入插件，不过这已经超出本课程范围，后续可以单独学习。

🧾 小节总结

• 依赖预构建把 CommonJS 包转成 ES Module，让浏览器能正确加载。
• 预构建缓存放在 node_modules/.vite，首次启动或依赖变化时会自动重新构建。
• include 手动补充需要预构建的依赖。
• exclude 排除不需要预构建的依赖，但要确保它们是原生 ES Module。
• vite --force 可以强制刷新预构建缓存。

❓ 知识问答

Q1：预构建会影响生产构建吗？

不会。预构建只在开发阶段使用，生产构建由 Rollup 直接处理。

Q2：node_modules/.vite 可以删除吗？

可以，它是缓存目录，删除后 Vite 会自动重新生成。

Q3：什么时候需要手动写 include？

当 Vite 自动扫描没有识别到某些依赖，或者你的依赖是动态引入导致扫描不到时。

🧪 小练习

为一个引入了 lodash-es 的项目添加预构建配置：

1. 安装 lodash-es。
2. 在 vite.config.js 中把它加入 optimizeDeps.include。
3. 删除 node_modules/.vite，重新运行 npm run dev，观察是否重新预构建。

import { defineConfig } from 'vite';

export default defineConfig({
    optimizeDeps: {
        // 请在这里补充 include
    },
});

🎉 恭喜你理解了 Vite 的依赖预构建！下一篇我们来学习如何构建和部署 Vite 项目。