vue - chunk-vendors.js文件太大，实现拆分打包的具体配置

1.背景

首次加载vue网页，chunk-vendors.js文件太大 ，加载十分缓慢，加上网络时快时慢，需要销毁将近一分钟才加载完。。。。

 

 

 2.解决

配置webpack拆分插件打包，在vue.config.js 文件了加上

// 配置webpack,拆分插件脚本
    configureWebpack: config => {
        // 开启分离js
        config.optimization = {
            runtimeChunk: 'single',
            splitChunks: {
                chunks: 'all',
                maxInitialRequests: Infinity,
                minSize: 20000,
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name(module) {
                            // get the name. E.g. node_modules/packageName/not/this/part.js
                            // or node_modules/packageName
                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                            // npm package names are URL-safe, but some servers don't like @ symbols
                            return `npm.${packageName.replace('@', '')}`
                        }
                    }
                }
            }
        };
    }

 

 

 有个缺点，会暴露使用的插件名称，

3.心得

拆分后，发现elementui的js文件仍然有2M多，因此，对于组件库，应该使用按需引入，而不要直接全量引入是最重要的一步