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

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

优化

我在用 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 分割？有谁遇到过类似问题吗？

我来解答赞 11 收藏

反馈

2 条解答

轩辕翼杨 Lv1

你的配置写法其实没问题，问题很可能出在导入方式上。

如果你是这样按需导入的：

import { debounce, throttle } from 'lodash'

import axios from 'axios'

那即便配了 manualChunks，这些方法也可能被打到业务代码所在的 chunk 里，因为 Rollup 会在打包时做 tree-shaking，把你用到的代码直接内联到调用处。

解决办法有两个：

第一种，改成完整导入（但这样打包体积会变大，不推荐）：

import _ from 'lodash'

import axios from 'axios'

第二种，用函数形式的 manualChunks 根据模块路径来分割，这个更靠谱：

build: {

  rollupOptions: {

    output: {

      manualChunks(id) {

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

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

            return 'lodash-vendor'

          }

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

            return 'axios-vendor'

          }

          return 'common-vendor'

        }

      }

    }

  }

}

另外，你全局样式那个完全不影响 chunk 分割，那个是 CSS 的事。

还有，配完改之后记得跑一下 rm -rf node_modules/.vite 清掉 Vite 的缓存，有时候配置改了但不生效就是缓存闹的。

试试看能不能解决，希望能帮到你！

2026-03-12 09:04

百里志欣 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