webpack打包文件大小优化splitChunks

// vue.config.js 文件
module.exports = {
    chainWebpack(config) {
        config.when(process.env.NODE_ENV !== 'development', config => {
            config.optimization.splitChunks({
                chunks: 'all', // chunks有三个值，initial表示直接引入的模块，async表示按需引入的模块，all则表示all in
                minChunks: 1, // 模块的最小引用次数，如果引用次数低于这个值，将不会被优化
                minSize: 10000, // 最小包体积，这里的单位是byte，超过这个大小的包会被splitChunks优化
                enforceSizeThreshold: 1024000, // 超过这个大小强行分包，忽略其他条件
                cacheGroups: { // 缓存组，自定义拆包规则在此定义
                    libs: {
                        name: 'chunk-libs', // 包的名字
                        test: /[\\/]node_modules[\\/]/, // 匹配规则
                        priority: 10, // 优先级
                        chunks: 'initial' // 仅打包最初依赖的第三方
                    },
                    elementUI: {
                        name: 'chunk-elementUI', // split elementUI into a single package
                        priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                    },
                    commons: {
                        name: 'chunk-commons',
                        test: resolve('src/components'), // 这里是匹配路径
                        minChunks: 3, //  minimum common number
                        priority: 5,
                        reuseExistingChunk: true // 复用已存在的chunks
                    }
                }
            })
        })
}