1、下载插件webpack-bundle-analyzer进行打包性能服务分析:
npm install --save-dev webpack-bundle-analyzer
2、在vue.config.js中配置
chainWebpack: config => {
config.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
},
3、配置externals,表示依赖外部扩展而不是依赖node_modules:
configureWebpack:{
externals: {
'vue': 'Vue',
'element-plus':'ElementPlus',
'echarts': 'echarts',
'vue-router':'VueRouter',
'axios': 'axios'
}
}
注意,这里的'vue': 'Vue' 表示从外部依赖引入vue并暴露给全局变量Vue,如同全局变量window,暴露的全局变量可以从官网获取,如:
4、index.html通过cnd引入外部依赖:
推荐从BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 铂特优选、或者jsdelivrCND库引入我们的项目依赖文件,另外你的依赖版本一定要对应上,从package.json中查看依赖版本,然后找到对应版本的js文件:
5、然后将使用CDN引入的依赖,在项目中找到原本的import导入并删除,如原本的mian.js中通过import ElementPlus from 'element-plus'; 我们现是从CDN引入依赖并产生了全局变量ElementPlus,直接注释掉即可。查看效果:
未引入CDN:引入以后