webpack4×缓存，cacheGroups，runtimeChunk

runtimeChunk

转载其他介绍：https://segmentfault.com/a/1190000010317802#articleHeader10

splitChunks.cacheGroups

1. 抽离第三方库

第一种方式：
optimization: {
        runtimeChunk: 'single', 
        splitChunks: {  
            cacheGroups: { 
                vendors: {  
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                },
            }
        },
    },
    会抽离出第三库的代码，生成一个vendors.db5b3f3dc26a5ebe685c.js文件，且每次打包第三库的hash也不会变化，
    这样就会利用浏览器的缓存机制，达到一个缓存优化，除非第三方库的版本变化，会重新生成一个新的文件，这样浏览
    器也会重新请求新的文件。

第二种方式：  
optimization: {
        runtimeChunk: 'single', 
        splitChunks: {  
            cacheGroups: { 
                commons: {
                    name: 'commons',
                    chunks: 'initial',
                    minChunks: 2
                  },
            }
        },
    },  
    这种方式也会抽离出一个commons.fgd453535ftg.js文件，与第一种方式的不同是，它不仅仅抽离第三方库，
    且会把所有js模块间引入的重复代码，也会抽离到commons.fdsfs534534g.js文件中。
    
	总结：可以根据自己的项目情况选择配置，因为第三库不需要每次都去加载，再没有版本变化的时候，
	只需要变化变更的业务逻辑代码，这样来达到一个缓存优化的目的