Webpack代码分割配置后，vendors chunk为什么还是很大？

巧丽 Dev 提问于 2026-01-28 23:35:35 阅读 140

优化

在优化项目时，我按文档配置了SplitChunks，但打包后的vendors chunk依然有800KB。我尝试把minSize设成0，调整cacheGroups的test正则，甚至手动命名splitChunks chunks，但打包结果没变化。难道还有其他配置没考虑到？


optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 0,
    cacheGroups: {
      vendors: {
        test: /[\/]node_modules[\/]/,
        priority: -10
      }
    }
  }
},

打包报告里vue和axios被分到vendors~app.js，但单独的lodash文件却没有拆分出来。是不是cacheGroups的配置逻辑哪里错了？

打包优化

我来解答赞 19 收藏

反馈

2 条解答

UI东霞 Lv1

我之前也碰到过这问题，vendors chunk 大得离谱，其实不是你配置错了，而是你漏了个关键点：Webpack 的 splitChunks 默认只对动态 import 的模块做更细的拆分，而像 lodash 这种你直接 import _ from 'lodash' 引入的，它可能被 Webpack 的模块连接方式（module concatenation / scope hoisting）提前合并进了 entry，根本没进 node_modules 的 chunk 流程。

先确认下：你有没有在 optimization 里加 moduleIds: 'deterministic' 或 'named'？不过这影响不大。重点是——你得看 lodash 到底有没有被单独打包进 node_modules chunk。

试试这个配置：

optimization: {

  splitChunks: {

    chunks: 'all',

    minSize: 30000,

    minChunks: 1,

    maxAsyncRequests: 30,

    maxInitialRequests: 30,

    cacheGroups: {

      vendors: {

        test: /[\/]node_modules[\/]/,

        name: 'vendors',

        chunks: 'all',

        priority: -10,

        reuseExistingChunk: true,

        enforce: true // ⚠️ 关键！加这个能强制拆分，尤其对某些大包有效

      },

      lodash: {

        test: /[\/]node_modules[\/]lodash[\/]/,

        name: 'lodash',

        chunks: 'all',

        priority: 20,

        reuseExistingChunk: true,

        enforce: true

      }

    }

  }

}

注意我加了两个东西：

1. enforce: true：这是很多文档没强调的，它会绕过 minSize、minChunks 的限制，强制拆出 chunk。lodash 这种单独的大包经常卡在 minSize 上（默认 30KB），你设 minSize: 0 但没加 enforce，它可能还是不拆。

2. 单独给 lodash 开个 cacheGroup，priority 要比 vendors 高，不然它可能被 vendors 的正则吃掉。

另外建议你用 webpack-bundle-analyzer 看下vendors chunk 里到底塞了啥。我见过有人把整个 moment（含 locale）都打包进去，结果 500KB+，其实只要 moment/min/moment.min.js 就几十 KB。

还有个小坑：如果你用的是 Vue CLI 或 CRA 这种脚手架，它们内部可能已经预设了 splitChunks，你写的配置可能被覆盖了，得确认下 vue.config.js 或 craco.config.js 有没有用 configureWebpack 合并配置。

最后说句实话：800KB 的 vendors 不一定坏——如果首屏加载快、gzip 后实际小，用户感知不强。但要是真想拆，enforce: true 加上单独 lodash 的 cacheGroup 基本能解决。

2026-02-26 12:05

设计师绍懿 Lv1

你这配置看着没啥大问题，但vendors太大可能是node_modules里还有别的库被塞进去了。试试加个enforce: true，再看看打包结果：

optimization: {

  splitChunks: {

    chunks: 'all',

    minSize: 0,

    cacheGroups: {

      vendors: {

        test: /[/]node_modules[/]/,

        priority: -10,

        enforce: true // 强制生效

      }

    }

  }

}

我之前这样搞的，一般都能拆得更细。要是还大，就检查下有没有啥巨无霸库没被按需加载。

2026-01-31 12:39