Vue中使用CDN的方式引入echarts、axios、Element UI、swiper

• 原本我所有的插件都是npm安装，然后使用的时候使用import引入的，，，但是在我打包时发现总共没有几个页面可能由于有大量的图表，打包之后20M左右
• 这样肯定是不行的，我就使用按需引入，但还是有17M左右
• 最后我就想起来使用CDN引入了，，果然最终文件大小就27kb

index.html

//elementUI的css文件
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
//swiper的css文件
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/swiper.css" />
//echarts相关文件
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js" > </script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js" ></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js" ></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js" ></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js" ></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js" > </script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js" ></script>
//axios
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
//vue
<script src="https://unpkg.com/vue/dist/vue.js"></script>
//vue-router
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
//element
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
//swiper
<script src="https://unpkg.com/[email protected]/js/swiper.js"></script>
//vue-awesome-swiper这个文件一定要引入，否则的话swiper无法正常使用
<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper/dist/vue-awesome-swiper.js"></script>
<script type="text/javascript">
      Vue.use(window.VueAwesomeSwiper);
</script>

vue.config.js

module.exports = {
  productionSourceMap: false,//打包之后不生成map文件
  chainWebpack: config => {
    config.optimization.minimize(true);//进行代码压缩
    config.externals({
      vue: "Vue",
      'vue-router': 'VueRouter',
      axios: "axios",
      "element-ui": "ELEMENT",
      'echarts': 'echarts',
      swiper: 'swiper'
    });
  }
};

注意：之前设置了elementUI按需引入，现在要把.babelrc文件删除

然后在组件中就可以正常使用它们了

例：echarts

this.myChart = echarts.init(document.getElementById(id));
this.myChart.setOption(option);