Vite 的 manualChunks 配置不生效是怎么回事?

司空圣恩 阅读 9

我在 Vite 项目里想用 manualChunks 把 lodash 单独打包,但 build 之后发现它还是被打进 vendor 里了,根本没拆出来。

我试过在 vite.config.js 里这样配:

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        lodash: ['lodash']
      }
    }
  }
}

但完全没用,是不是写法有问题?还是说要配合其他配置才行?

我来解答 赞 6 收藏
二维码
手机扫码查看
1 条解答
シ鑫丹
シ鑫丹 Lv1
你这个写法本身没问题,标准写法确实是这么配的,但 Vite 在底层会自动合并 manualChunks,如果你项目里用了 build.rollupOptions.output.manualChunks,但没关掉 Vite 自带的自动分包策略,那它可能会被覆盖掉。

关键点是:Vite 默认开启了 build.rollupOptions.output.manualChunks 的自动处理(比如把 node_modules 里的包都归到 vendor),你需要显式地禁用它的自动逻辑,或者用函数式写法覆盖它。

最简单的办法是改用函数式写法,比如这样:

export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('lodash')) {
return 'lodash'
}
}
}
}
}
})


或者如果你坚持用对象写法,得确认你没在别的地方(比如插件)动态改过 manualChunks,也最好把 Vite 默认的自动拆分关掉,比如:

export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
lodash: ['lodash']
}
}
},
// 禁用 Vite 默认的自动拆分逻辑(vite 5+)
chunkSizeWarningLimit: 1000,
rollupOptions: {
output: {
manualChunks: {
lodash: ['lodash']
}
}
}
}
})


不过更推荐用函数式写法,因为对象写法有时候会被 Vite 内部逻辑合并掉,函数式写法更可控。

另外记得检查下你用的 Vite 版本,vite 5 之后默认的 rollup 行为改过,有些老配置可能不兼容。如果还是没生效,跑个 vite build --debug 看下 rollup 的 output.manualChunks 配置是不是被覆盖了,经常是被插件偷偷改了。
点赞 1
2026-02-27 11:00