关于vue首屏优化的解决方案

做好了的项目，放自己测试服务器上速度还挺快，所以当时也没想那么多，后来放到公司服务器上，才发现慢的一批，后来想到应该是要进行优化，

首先，将所有未压缩的资源，通通压缩一遍，试一下，快了一点点，但还是比较慢，属于那种忍受不了的速度。

然后想到使用cdn以减少rendor.js的容量。

首先，在index.html页面中引入js时使用cdn引入

<div id="app"></div>
  
  <!--开发环境-->
  <!-- <script src="https://cdn.bootcss.com/vue/2.5.10/vue.js"></script> -->
  <!--生产环境-->
  <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script> 
  <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
  <!-- <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script> -->
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

然后在build文件夹下的webpack.base.conf.js文件下externals对象中添加如下代码

externals: {
    'BMap': 'BMap',
    'vue': 'Vue',
    'element-ui':'element-ui',
    // 'vuex': 'Vuex',
    'axios': 'axios',
    
  },

最后在main.js中，引入方式进行改变一下

import Vue from 'vue'
import App from './App'
import router from './router'
// import Element from 'element-ui'

import paging from './components'
import has from '@/assets/js/btnPermission.js';

Vue.prototype.$ELEMENT = { size: 'small' };
Vue.prototype.$axios = axios;

Vue.config.productionTip = false