Webpack optimization.splitChunks配置后打包体积反而变大了怎么办？

splitChunks把第三方库拆出来之后体积变大，这事儿其实很常见。问题应该出在你把minSize设成1了，这个参数太小会导致不管多小的模块都会被强制拆成单独chunk。原本main.js里的第三方库可能被拆成了十几个小文件，每个文件都要加webpack的运行时代码，总体积自然就膨胀了。

你现在这个配置相当于告诉webpack："所有模块都要单独拆分"，包括那些很小的polyfill或者工具函数。vendor.js变大很可能是因为它包含了这些被强制拆分的小模块。

你试试把minSize改回默认的30000（单位是字节），这相当于30KB。这样webpack只会拆分超过30KB的模块，避免把小模块拆成独立文件导致运行时代码重复。

optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
automaticNameDelimiter: '~'
}
}

如果你特别想把vendor单独拆出来，可以加个cacheGroups配置：

cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendor',
chunks: 'all'
}
}

这样能确保所有node_modules都打到vendor.js里，而且不会因为太小的模块拆分导致体积膨胀。

minSize: 1 这个配置太激进了，省事的话直接删掉它，默认值就够用了。另外加上 cacheGroups 做更精细的拆分：

optimization: {

  splitChunks: {

    chunks: 'all',

    cacheGroups: {

      vendors: {

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

        name: 'vendors',

        priority: -10

      }

    }

  }

}

调整完再看看打包结果，正常情况下体积应该会降下来。