vue首次加载很慢、vendor文件过大的优化方式

最近开发一套后台管理系统，遇到首页加载很慢的问题，技术栈是 vue全家桶 + elementUI + echarts 。首次加载大概需要10s，页面才能出来。

总结如下原因：

原因1：由于vendor.js和app.css较大，UI渲染线程并不会优先加载他俩，但是VUE等主流的单页面框架都是js渲染html body的,所以必须等到vendor.js和app.css加载完成后完整的界面才会显示。

原因2：还有一个原因就是单页面首次会把所有界面和接口都加载出来，会有多次的请求和响应，数据不能马上加载

二者相加所以会有长时间的白屏。

解决方式如下：

1.使用CDN加载

  (1)  index.html引入cdn

 <!-- 引入Vue.js -->
    <script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>
    <!-- 引入vuex.js -->
    <script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
    <!-- 引入vue-router -->
    <script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://cdn.staticfile.org/element-ui/2.4.3/index.js"></script>
    <!-- 引入样式 -->
    <link href="https://cdn.staticfile.org/element-ui/2.4.3/theme-chalk/index.css" rel="stylesheet">

 (2)webpack.base.conf.js

添加

externals:{
    'vue':'Vue',
    'element-ui':'ELEMENT',
    'vue-router':'VueRouter',
    'vuex':'Vuex'
  },

2.防止编译文件中出现map文件。
config/index.js 文件中设置 productionSourceMap 为 false

3.使用gzip压缩
1). 修改config/index.js 文件下 productionGzip：true ;
2). 安装依赖 npm install --save-dev compression-webpack-plugin@1.1.11 。（注：这里为啥要指定 版本号呢，是因为高版本的依赖会报错，我使用的1.1.11版本是没报错）

4.去掉代码中的console.log
打包之后控制台很干净，部署正式环境之前最好这样做。

最后来看下打包后的效果：

参考链接：https://www.jianshu.com/p/c4a9a0d4db95