vue性能优化-------vendor优化详细用法（瘦身），减小体积，引入cdn

vue性能优化方面有一个是关于vendor的优化，vue其他方面的优化产考https://blog.csdn.net/Chris__wang/article/details/90477555

当项目打包的时候，会将ElementUI，Vue，Vuex，axios，VueRouter等都打包进vendor.js里面，导致最后的vendor.js有900k之多

页面访问的时候会很浪费时间，所以根据网上提供的方法，这些比较占资源的插件引入cdn，速度会快很多，下面是详细用法

main.js里面引入组件，这里面一定要引入，不然本地项目跑步起来，其中注意  ELEMENT 要大写，因为插件里面定义的就是大写

import Vue from 'vue';
import ELEMENT from 'element-ui';
import App from './App';
import router from './router';
import VueAwesomeSwiper from 'vue-awesome-swiper';

import 'swiper/dist/css/swiper.css';

import 'font-awesome/css/font-awesome.css';

import axios from 'axios';
Vue.use(ELEMENT)
Vue.use(VueAwesomeSwiper)
Vue.use(swiper);
Vue.config.productionTip = false
Vue.prototype.axios = axios;
Vue.prototype.baseUrl = './static';


new Vue({
    el: '#app',
    router,
    components: { App },
    template: ''
})

接着在index.html中引入CDN

 build/webpack.base.conf.js里面也要改一下

externals: {//module同目录加上此配置，打包的时候忽略这些
    "BMap": "BMap",
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'vue-router': 'VueRouter'
  }

在src/router/index.js里面也要把vue.use(VueRouter)去掉

然后再打包，发现只有170k确实减少了很多

注意，如果发现Vue Router相关的报错，可以不对Router进行忽略，将路由打进包里也没问题，这就需要在上面的这些配置处不对router相关做修改