Vue项目通过CDN引入依赖减少打包文件体积优化加载性能

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:引入以后