vendor.js在webpack打包的会将第三方库也进行打包，就会导致vendor.js的体积变大
解决方案： 使用cdn加速去从第三方服务器加载第三方库而不是自己的服务器，可以节省自己服务器的带宽
在index.html中使用cdn方式引入第三方库
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- element-ui css样式 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css"/>
<title></title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
<script src="https://cdn.bootcss.com/highcharts/6.1.0/highcharts.js"></script>
</body>
</html>
修改webpack.base.conf.js， module.exports 中加入，同时将main.js中引入第三方库进行删除
// key 是第三方库名 value 是你项目中的别名
externals: {
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
element: "element-ui",
axios: "axios"
}
没有使用前
image.png
使用后
image.png
