浅谈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 = {
entry: {
app: './src/main.js'
},
// 外部资源扩展
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex',
'vue-resource': 'VueResource'
},
...
}
2.还有如果使用到第三方的组件库的时候，尽量通过按需导入组件的方式,没必要全部引入,这样的话会增加项目的体积,例如使用element-ui，我们可以借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
3.在路由配置方面，使用路由懒加载，当访问一个页面的时候，只加载当前组件相关的js资源，访问其它页面的时候，再加载相应的组件代码。
//main.js
import Vue from "vue";
import Router from "vue-router";
const Home = () => import("./views/Home.vue");
const About = () => import("./views/About.vue");
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/about",
name: "about",
component: About
},
4.我们在开发项目的过程中,难免会遇到一些需求,此时我们可能想借助第三方的库来实现，比如碰到了处理时间的需求，可能很多人会想到Moment.js,但是这个库的体积是比较大的，我们可以使用dayjs来代替，当然，小编只是举了个例子，具体的话还是得根据业务的需求来决定。
5.最后还有一个优化的方案是借助webpack的代码压缩来提高首屏加载的速度,这里需要配合nginx来处理，这里我大概提供几个思路：
1.使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件来压缩JS文件；生产环境关闭源码映射，一方面能减少代码包的大小，另一方面也有利于系统代码安全；清除打印日志和debugger信息。
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
pure_funcs: ['console.log']
},
//禁用除错功能。如果设为true，在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。
sourceMap: false
})
2.使用mini-xss-extract-plugin提取CSS 到单独的文件, 并使用optimize-css-assets-webpack-plugin来压缩CSS文件
以上的优化方案,在我们日常开发中可能会使用到,其实提高首屏加载速度主要从代码层面和webpack优化打包层面来考虑,以上为个人经验，希望能给大家一个参考，谢谢支持！