webpack里的optimization.splitChunks配置commons和vendor是什么意思？

Question

最近在学习webpack4的过程中，遇到问题，就是关于optimization.splitChunks，官网上说这是用于分包的，将重复引入的模块打包到一个js里面，防止重复打包，这个我可以理解，但是关于具体的配置，我不是很懂，求大神赐教，以下是代码：

optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                },
                vendor: { 
                    chunks: "all",
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    minChunks: 1,
                    maxInitialRequests: 5,
                    minSize: 0,
                    priority: 100
                }
            }
        }
    }

这是我自己摸索的配置，然后并没有如我想的那样打包出2个js，我想问，commons和vendor各是什么意思，各在什么情况下使用，各项配置是什么意思，我这么写，为何只打包出了一个js（vendor），commons呢，如果name不设置，那么生成的文件名是什么，还有，我发现打包出来的vendor.js特别大，是正常的吗？
求大神不吝赐教，万分感谢！

Answer 1

commons 一般是是个人定义的，vendor 是导入的 npm 包(从test中可以看出)，
commons 用于个人定义的模块被重复引用，vendor 用于npm引入的包被重复引用了，
各项配置不多说了，
只打包出一个js是因为commons 少了一个配置项 minSize: 0； 该项必须有，因为webpack默认值是30k，很明显我打包的commons 不足30k，故必须指明其最小体积，
如果那么不设置name，生产的文件名是引入的bundle加上自动命名连接符(automaticNameDelimiter: '~'),
因为vendor 是导入的 npm 包合并文件，故较大属正常，但因为几乎不变，故可以交给客户端缓存

Answer 2

这两个在这里都是 group 的名字，一般来说
commons 是你手写的
vendor 是导入的 npm 包
只打包出一个可能是因为 chunks: "all" 覆盖了上面的
打包出来特别大也没问题，因为 vendor 会缓存在客户端，第一次加载的时候流量消耗会比较多

参考 https://webpack.js.org/plugin...