vue项目首屏加载时间优化实战

import ImageComponent from 'COMMON/imageComponent'
import InfiniteLoading from 'COMMON/infiniteLoading'
import SearchDialog from 'COMMON/SearchDialog'
import BasicTable from 'COMMON/BasicTable'
import VueQriously from 'vue-qriously'

Vue.use(ImageComponent)
Vue.use(InfiniteLoading) // 可以去除
Vue.use(SearchDialog) // 可以去除
Vue.use(BasicTable) // 可以去除
Vue.use(VueQriously) // 可以去除

import VueECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'

...

 
 
  

  

剔除全家桶和Element-ui等只有，剩下的需要首次加载 vendors 就很小了。
使用 CDN 的好处有以下几个方面
（1）加快打包速度。分离公共库以后，每次重新打包就不会再把这些打包进 vendors 文件中。
（2）CDN减轻自己服务器的访问压力，并且能实现资源的并行下载。浏览器对 src 资源的加载是并行的(执行是按照顺序的)。
第四步：检查Nginx 是否开启 gzip
如下图所示，开启了gzip后js的大小比未开启gzip的js小2/3左右，所以如果没开启gzip，感觉我们做的再多意义也不大，如何看自己的项目有没有开启gzip，如下图所示，开启了gzip，在浏览器的控制台Content-Encoding一栏会显示gzip，否则没有。Nginx如果开启gzip，请自行搜索，或者叫服务端来开启。
 

第五步：检查路由懒加载
路由组件如果不按需加载的话，就会把所有的组件一次性打包到app.js中，导致首次加载内容过多，vue官方文档中也有提到， 地址 。

{
 name: 'vipBoxActivity',
 path:'vipBoxActivity',
 component(resolve) {
  require(['COMPONENTS/vipBox/vipBoxActivity/main.vue'], resolve)
 }
},


{
 path: 'buyerSummary',
 name: 'buyerSummary',
 component: () => import('VIEWS/buyer/buyerSummary/index'),
},

上面的两种引入组件的方法都是正确的，都能实现路由的懒加载。
最后
最后我们可以发现vendor.js的大小减少了很多。其中第一步到第三步我们项目中都没做，第四步和第五步我们做了。如果读者你没做，一定要注意了。最后希望这篇文字能够对大家有一点点帮助，也希望大家多多支持。