Webpack的splitChunks配置为什么没生效？大文件还是被打包在一起

你的 splitChunks 配置没生效，主要是因为只改了 minSize 是不够的。minSize 确实是触发拆分的条件之一，但 Webpack 的 splitChunks 默认行为是基于 cacheGroups 的规则来决定怎么分包，你没配 cacheGroups 就相当于用默认规则，而默认规则本身就倾向于把 node_modules 里的东西全塞进一个 vendor chunk。

常见的解决方案是显式定义 cacheGroups 来控制拆分逻辑。比如你想把 axios 和 lodash 单独拆出来，可以这样写：

optimization: {

  splitChunks: {

    chunks: 'all',

    minSize: 30000,

    minChunks: 1,

    maxAsyncRequests: 5,

    maxInitialRequests: 3,

    cacheGroups: {

      vendor: {

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

        name: 'vendor',

        chunks: 'all',

        enforce: false,

        priority: 10

      },

      lodash: {

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

        name: 'lodash',

        chunks: 'all',

        priority: 20

      },

      axios: {

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

        name: 'axios',

        chunks: 'all',

        priority: 20

      }

    }

  }

}

注意这里的 priority 很关键，优先级高的会先匹配。比如 lodash 和 axios 的优先级高于通用的 vendor，这样它们就不会被兜底规则吃掉，才能真正拆成独立文件。

另外建议打包后用 webpack-bundle-analyzer 看下体积分布，别光看 stats，不然很容易误判是否生效。有时候不是配置没起作用，而是文件加起来刚好没超 maxInitialRequests 之类的限制，看起来就像没拆。

你遇到的问题根本原因是splitChunks的基础配置无法覆盖默认的cacheGroups行为。minSize确实能生效，但默认情况下splitChunks是通过cacheGroups来组织规则的，你的配置相当于只改了全局阈值，但没告诉webpack如何具体拆分模块。

正确的做法是显式定义cacheGroups。比如你想让每个第三方库都单独拆出来，应该这样写：

optimization: {

  splitChunks: {

    chunks: 'all',

    minSize: 30000,

    cacheGroups: {

      // 拆分node_modules里的库

      vendor: {

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

        name: 'vendors',

        chunks: 'all',

        enforce: true

      },

      // 拆分lodash这种常用库

      lodash: {

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

        name: 'lodash',

        chunks: 'all',

        enforce: true

      },

      // 拆分axios

      axios: {

        test: /[\/]node_modules[\/](axios)[\/]/,

        name: 'axios',

        chunks: 'all',

        enforce: true

      }

    }

  }

}

这里的关键点：
cacheGroups里的每个规则都是一个chunk组
test匹配模块路径，这里用正则匹配node_modules下的包
enforce: true表示强制使用这个分组，不和默认规则合并
name指定输出的chunk名，这样就能看到单独的lodash~main.js这样的文件

另外要注意，如果你的模块体积小于minSize，它就不会被拆分。所以你设置的30000（30kb）是合理的，但像react这种大库肯定会超过阈值，说明之前没拆开是因为规则没写对。

建议你可以用webpack-bundle-analyzer插件可视化查看打包结构，这样更容易定位问题。