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

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

优化

最近在优化项目构建速度时，按照文档给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 收藏

反馈

2 条解答

司马爱豪 Lv1

这个情况我遇到过，其实跟版本关系不大，主要问题出在lodash的用法上。看日志显示Vite确实预构建了lodash，但代码里可能用了直接引入单个方法的写法。

比如你这样引入的话：

import debounce from 'lodash/debounce'

Vite的预构建对这种深度引入会失效。正确的处理方式有两种：

第一种是改引入方式，全部走主入口：

import { debounce } from 'lodash'

第二种是在optimizeDeps里加上子路径配置：

optimizeDeps: {

  include: [

    'lodash',

    'lodash/debounce', // 把所有用到的子路径都加上

    'axios'

  ]

}

另外可以检查下package.json里lodash的版本是不是符合semver规范，有时候yarn/npm的版本解析策略也会影响预构建。

建议先用第一种方式试下，大部分情况下改引入方式就能解决。如果项目里lodash的用法太多改起来麻烦，再用第二种方案。

2026-03-05 21:16

___昊沅 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