浅谈Vue单页应用首屏加载速度优化方案

心语:最不会利用时间的人，最会抱怨时间不够

趁着五一放假,刚好最近天气也是不好,.所以抽出一点时间写一点东西，也算是不辜负这个美好的假期吧！小编也祝愿大家五一快乐，玩得愉快哈

随着各大前端框架的诞生以及演变,由此衍生了一个的名词：SPA。那么什么是SPA？提到这个单词，很多人可能会第一时间想到养生会所,哈哈，当然了，毕竟如今的社会，当你走在琳琅满目的大街上，也会看到各种行行色色的养生会所的匾牌上会写这个名词，也属于正常现象了，那么对于在前端领域中，SPA到底指的什么呢？接下来让我们进入主题吧,奥利给！

什么是SPA?

SPA全称是single page web application，称为单页面应用,就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

我们知道对于像Vue、react、angular目前比较流行的三大框架,它们也都属于单页面应用，单页面应用的优势在于可以不重新加载整个页面的情况下，通过ajax和服务器通信，实现整个Web应用的局部更新,带来了极致的用户体验，像在vue项目中，我们通过引入各种各样的js、css文件，那么在webpack打包编译的过程中，都会被打包进vendor.js中，那么浏览器在加载该文件之后才会显示首屏。

在如今的前后端分离的时代，前端主要是通过请求AJAX数据来获取后端提供的数据，进而通过更新数据的变化来更新视图，这也就是vue框架中经典的MVVM模式，首先请求数据的过程也是需要消耗时间的 ，你可以想一想，如果随着项目代码量的不断增加以及引入越来越多的第三方库，那么vendor.js的文件体积将会相当的大，将会影响首屏的体验，或者可能会出现白屏现象。其实这么的话对于用户来讲，是相当体验不友好的，你想想，如果用户打开一个网站，首屏加载太慢，你觉得用户还愿意等下去？如果是我，我肯定直接就关闭页面了。

那么该如何提高首屏加载的速度呢？以下给出小编知道的几种优化方案：

• 使用CDN资源,减小服务器带宽压力
• 按需加载三方资源，比如一些第三方组件库里的组件
• 路由懒加载
• 使用更轻量级的工具库
• 开启gizp压缩

优化方案

1.在index.html中引入cdn资源,但需要注意的是通过 CDN 引入，在使用 VueRouter Vuex ElementUI 的时候要改下写法。CDN会把它们挂载到window上，因此不再使用Vue.use(xxx)。因为不用占用访问外网的带宽，不仅可以为您节省流量，还能通过CDN加速，获得更快的访问速度。但是要注意下，如果你引用的CDN 资源存在于第三方服务器，在安全性上并不完全可控。

然后在vue.config.js中配置如下代码：

module.exports = {