Vite预构建配置后为什么依赖包还是没被预构建？

红梅~ 提问于 2026-02-10 08:38:35 阅读 20

优化

最近在优化项目构建速度时，按照文档给lodash配置了预构建，但打包后发现它还是被内联了。明明在vite.config.js里写了optimizeDeps.include，重启服务和清理缓存都没用，这是哪里出问题了？

具体场景是这样的：我升级到Vite 4.4.9后，在配置文件里这样写的：


import { defineConfig } from 'vite'
export default defineConfig({
  optimizeDeps: {
    include: ['lodash', 'axios']
  }
})

但执行vite build时日志显示：


vite v4.4.9 building SSR bundle for production...
✓ 0 dependencies externalized.
✓ Pre-bundled dependencies:
lodash: skipped (already in node_modules/.vite/)
axios: pre-bundled as external

可问题是打包后的输出里lodash方法直接出现在代码里了，axios倒是正常被抽离了。尝试过删除node_modules/.vite和node_modules/lodash重新安装，还是不行，是不是版本兼容有问题？

我来解答赞 6 收藏

反馈

1 条解答

___昊沅 Lv1

这个问题其实挺典型的，我也踩过类似的坑。你看到日志里说 lodash 被跳过了，是因为 Vite 检测到它已经在 node_modules/.vite 里有缓存了，但关键问题是：lodash 是一个深层引用的包，你 import 的可能不是 'lodash' 这个入口，而是像 'lodash/debounce' 这种子路径。

Vite 的预构建只对完整的包名生效，比如 'lodash'，但它不会自动处理你项目里所有对 'lodash/debounce' 或 'lodash/throttle' 的引用。所以即使你加了 include: ['lodash']，最终打包时这些方法还是被内联进去了。

我的做法是改成这样：

import { defineConfig } from 'vite'

export default defineConfig({

  optimizeDeps: {

    include: ['lodash', 'lodash/*', 'axios']

  }

})

加上 'lodash/*' 让 Vite 明确去预构建所有子模块。然后删掉 node_modules/.vite 目录再重启 dev 或 build，就能看到 lodash 的各个方法也被正确 external 化了。

另外建议你在 build 后用 rollup-plugin-visualizer 生成一下包分析图，看看 lodash 到底有没有被打进去。有时候你以为它没被处理，其实是别的地方引入方式不对。

还有个小提示：如果你用的是 lodash-es 而不是 lodash，那更得小心，两者路径结构不一样，最好统一换成 lodash-es 并在 include 里写清楚。

2026-02-10 09:11