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

司空圣恩提问于 2026-02-27 10:48:22 阅读 62

优化

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

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

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

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

开发工具构建工具

我来解答赞 14 收藏

反馈

2 条解答

Mr.克培 Lv1

问题很可能是 lodash 被 Vite 的 optimizeDeps 预构建了，预构建的依赖会直接打包，不会触发 manualChunks。

解决办法是从 optimizeDeps 中排除 lodash：

export default defineConfig({

  optimizeDeps: {

    include: []

  },

  build: { rollupOptions: {

      output: {

        manualChunks: {

          lodash: ['lodash']

        }

      }

    }

  }

})

或者用函数式写法更稳：

manualChunks(id) {

  if (id.includes('lodash')) return 'lodash';

}

2026-03-19 09:15

シ鑫丹 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 配置是不是被覆盖了，经常是被插件偷偷改了。

2026-02-27 11:00