Vite 的 manualChunks 配置不生效是怎么回事? 司空圣恩 提问于 2026-02-27 10:48:22 阅读 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 加载更多 相关推荐 2 回答 46 浏览 Vite的manualChunks配置后组件还是单独打包怎么办? 我在用Vite开发React项目时,想通过manualChunks把四个公共组件打包到同一个chunk里,但配置后每个组件还是单独生成了文件... 项目结构是这样的,四个组件分布在不同页面: // v... 丹丹 优化 2026-01-30 16:11:34 1 回答 63 浏览 为什么切换到Vite后Sass配置不生效?Webpack和Vite的CSS处理配置有何不同? 我之前用Webpack配置了Sass,现在迁移到Vite后样式文件报错说找不到变量,但代码明明没改啊。之前在vue.config.js里通过chainWebpack添加了sass-loader,现在换... ❤丽丽 前端 2026-02-18 21:47:33 2 回答 40 浏览 迁移Vite到4.x后react插件配置报错怎么办? 今天升级Vite到4.x后,react插件配置突然报错了。之前用vite-plugin-react时这样写的: import react from '@vitejs/plugin-react' exp... 哲玮(打工版) 工具 2026-02-17 10:23:28 1 回答 26 浏览 Vite配置Library模式打包后导出的文件无法被其他项目引入怎么办? 我在用Vite的Library模式打包一个工具库时遇到问题,按照文档配置了library选项,但打包生成的umd文件在另一个项目里引入时一直报错:Uncaught TypeError: Cannot ... Air-卫红 前端 2026-02-15 10:24:34 2 回答 25 浏览 Vite+React项目中配置别名后无法导入组件,路径报错怎么办? 在用Vite搭建React项目时,我按文档配置了@别名指向src目录,但导入组件时总提示404错误。比如这样写: // vite.config.js import { defineConfig } f... 迷人的晟华 框架 2026-02-14 19:05:26 1 回答 3 浏览 Vite插件中transform钩子不生效是怎么回事? 我在写一个Vite插件,想用transform钩子处理.vue文件里的内容,但发现根本没进这个函数。配置也加了,路径也对,就是不触发,到底哪里出问题了? 这是我的插件代码: export defaul... Mr-露露 工具 2026-03-01 17:10:20 1 回答 18 浏览 Vite 里怎么自定义 esbuild 的 JSX 配置? 我在用 Vite 搭建 React 项目,想让 esbuild 支持自动导入 React,但改了 build.jsxInject 好像没生效? 试过在 vite.config.js 里加这个配置: e... 技术士俊 前端 2026-02-26 15:47:17 1 回答 18 浏览 Vite库模式打包后入口文件路径不对怎么办? 我在用Vite的库模式打包组件库时遇到了问题,配置了build.lib.name为"my-lib",但生成的dist文件夹里只有vendor.js,没有预期的main.js入口文件。查看构建日志没报错... Prog.铭轩 前端 2026-02-19 18:38:24 1 回答 15 浏览 Vite开发时代理请求到后端,但刷新页面后请求地址变成绝对路径怎么办? 我在用Vite搭建React项目时配置了代理,开发环境访问/api/*都会代理到localhost:3000。但当我直接访问带有路由参数的页面(比如/user/123),刷新后发起的请求变成了http... UI馨予 工具 2026-02-18 19:06:26 1 回答 24 浏览 Vite配置插件时,为什么自定义钩子函数没有被触发? 在开发环境用Vite打包时,我按文档给自定义插件加了closeBundle钩子,但控制台就是没输出调试信息。配置文件里已经用export default导出了插件对象,也试过把钩子写成async形式,... 欧阳彦鸽 工具 2026-02-11 10:08:34
build.rollupOptions.output.manualChunks,但没关掉 Vite 自带的自动分包策略,那它可能会被覆盖掉。关键点是:Vite 默认开启了
build.rollupOptions.output.manualChunks的自动处理(比如把 node_modules 里的包都归到 vendor),你需要显式地禁用它的自动逻辑,或者用函数式写法覆盖它。最简单的办法是改用函数式写法,比如这样:
或者如果你坚持用对象写法,得确认你没在别的地方(比如插件)动态改过 manualChunks,也最好把 Vite 默认的自动拆分关掉,比如:
不过更推荐用函数式写法,因为对象写法有时候会被 Vite 内部逻辑合并掉,函数式写法更可控。
另外记得检查下你用的 Vite 版本,vite 5 之后默认的 rollup 行为改过,有些老配置可能不兼容。如果还是没生效,跑个
vite build --debug看下 rollup 的 output.manualChunks 配置是不是被覆盖了,经常是被插件偷偷改了。