vue打包后的vendors比较大_前端_web_建站_vue_react_leaflet_arcgis

vendors打包后比较大的原因是因为引入的第三方插件比较多，解决办法使用第三方加速包引入，之前使用了vue-echarts图标插件，打包后的文件竟然达到了2M多，太吓人了，然后发现了在main.js中全局注册了一下和组件中又引入了一下，打包后还是比较大，差不多1M，然后想使用第三方加速库来解决，但是想换个图表插件，就使用了echarts这个插件，下一篇文章介绍如何使用，这里只介绍如何使用第三方加速库，拿echarts这个做例子，

这里使用的是BootCND,官网地址：https://www.bootcdn.cn/

然后搜索echarts，选择加速包，在index.html引入，这里把vue和vue-router和axios都是用了cdn加速

在index.html引入

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.7/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

我使用的是vue.-cli3.0,在vue.config.js中配置：

    configureWebpack:{
        externals: {
            'echarts':'echarts',
            'axios': 'axios',
            'vue':'Vue',
            'element-ui': 'ELEMENT',
        }
    },

在mian.js中把import axios import Vue ，main.js代码：

//import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//import ElementUI from 'element-ui';
import axios from './api/http';
// import 'element-ui/lib/theme-chalk/index.css';
import fromTime  from './utils/fromTime';
import ELEMENT from 'element-ui'

Vue.config.productionTip = false

Vue.prototype.$axios=axios;
Vue.use(ELEMENT)

Vue.filter('fromTime',fromTime)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')