Vite 的 manualChunks 配置怎么让第三方库单独打包？

打工人路阳提问于 2026-03-07 16:04:23 阅读 4

优化

我在用 Vite 做项目，想把像 lodash、axios 这些第三方库单独打成 vendor 包，但配置了 manualChunks 后发现它们还是被打进 main.js 里了，根本没拆出来。我试过按文档写，但好像没生效。

这是我的 Vite 配置片段：

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['lodash', 'axios']
      }
    }
  }
}

另外，我页面里用了点全局样式，比如：

.btn-primary {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}

但不确定是不是这个影响了 chunk 分割？有谁遇到过类似问题吗？

我来解答赞 0 收藏

反馈

1 条解答

百里志欣 Lv1

啊这个坑我踩过，简直血泪教训。你的问题出在两个地方：

第一，Vite 4+ 版本默认用了新的 chunk 策略，manualChunks 得这么配才有效：

build: {

  rollupOptions: {

    output: {

      manualChunks(id) {

        if (id.includes('node_modules')) {

          if (id.includes('lodash') || id.includes('axios')) {

            return 'vendor'

          }

          return 'common'

        }

      }

    }

  }

}

第二，全局样式完全不影响 chunk 分割，别担心这个。我当初也以为是样式问题，结果发现完全不是。

补充个坑：如果用了动态导入，记得在 manualChunks 里排除掉，否则会被误判进 vendor。比如：

if (id.includes('node_modules') && !id.includes('src')) {

  // 这里的 !id.includes('src') 就是防止把动态导入的组件误判为第三方库

}

最后跑下 npm run build 看看 dist 目录，应该能看到 vendor.js 单独打包出来了。要是还有问题，八成是某个依赖的引用方式有问题，比如直接用了 CDN 引入。

2026-03-07 16:10