关于Vue单页面应用的首屏加载优化

关于Vue单页面应用的首屏加载优化：

---

在vue中，可以通过路由配个路由占位符来完成单页面应用的实现，其原理时通过对路由占位符的更新来完成单页面应用的实现。单页面应用的优点在于页面的切换不会导致整个页面的刷新，而是对路由占位符的更新，比起传统的，单页面应用切换页面速度更快、用户体验更好，代码的样式及标准更好控制，程序员的工作量更少。缺点在于单页面的首屏加载速度较慢，SEO不友好。

1、缩小项目体积：

原理：体积越小，加载越快。
方法：

• 通过webpack对项目体积进行压缩，开启gzip压缩文件
• 通过对css3、js文件的合并，如在两不同组件中，拥有相同的样式，可通过全局css文件中设置。在js文件上，将相同的方法封装合并成一个方法，如API请求。
• 减小图片体积，图标可通过矢量图来代替。

2、减少请求次数/体积：

原理：请求越少，加载越快
方法：

• 通过精灵图来减少小图标的总请求数
• 在图片数据多时，页面高度大于浏览器高度，通过图片懒加载，对未可见的图片进行延迟加载。
  原生方法： 先将img标签中的src的路径设置为同一张图片(空白图片），将真正的图片路径保存在data-src属性中，通过scrollTop方法获取浏览器窗口顶部与文档顶部之间的距离，通过clientHeight方法获取可视区高度。对window.scoll触发时，执行事件载入data-src（对每个images标签DOM来求其offsetTop，如果images距离顶部的高度 >=可视区高度+窗口距离文档顶部的距离 ）。
  vue方法： 通过安装vue-lazyload依赖->全局引入vue-lazyload依赖->配置依赖

npm install vue-lazyload --save

 //main.js 文件
import VueLazyload from 'vue-lazyload'	//引入依赖
Vue.use(VueLazyload)
// 配置项
Vue.use(VueLazyload, {
    
    
  preLoad: 1.3,	//表示lazyload的元素,距离页面底部距离的百分比.计算值为(preload - 1)，默认值为1.3
  error: 'dist/error.png',	//加载失败后图片地址
  loading: 'dist/loading.gif',	//加载时图片地址
  attempt: 1	//	图片加载失败后的重试次数，默认值为3
})

• 将大文件上传到CDN，通过CDN加载依赖，CDN的全称是Content Delivery Network，即内容分发网络。其通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。 因为CDN的这些特性，我们可以将体积较大的文件或是图片上传到CDN中，通过CDN来加载，减轻了服务器的请求压力，同时也可以通过CDN来获取、加载依赖。
• 对绑定了请求的按钮或是别的触发因素，对其进行节流，设定时间周期（例如：按钮点击后，将其disable设置为false,禁用按钮，设定定时器，设定时间周期，解除禁用。），防止频繁触发，导致请求数激增，增大服务器压力。

3、减少加载模块

原理：单页面应用的首屏加载较慢主要是因为单页面应用在首屏时，无论是否需要都会加载所有的模块，可通过按需加载、路由懒加载来优化。
方法：

• 按需加载，通过对路由文件的配置，来对相关模块划分区间，如登录界面可以和首页、主页面划分一块，在进入首屏时，只对首屏所在的区块进行加载。通过require.ensure()来将多个相同类的组件打包成一个文件。如示例代码，打包时，将两个组件打包成一个js文件，文件名为good。

{
    
    
     path: '/goodList',	//path路径	
     name: 'goodList',	//组件名
     component: r => require.ensure([], () => 	r(require('../components/goodList')), 'good')	//good类型的组件
},
{
    
    
     path: '/goodOrder',
     name: 'goodOrder',
     component: r => require.ensure([], () => r(require('../components/goodOrder')), 'good')//good类型的组件
}

• 动态加载，通过import来实现路由的动态加载，这个时候对于路由的加载是动态的，用到再加载。

{
    
    
     path: '/goodList',	//path路径	
     name: 'goodList',	//组件名
     component: () => import('../components/goodList')
},
{
    
    
     path: '/goodOrder',
     name: 'goodOrder',
     component: () => import('../components/goodOrder'),
}

前端新人，写博客为了记录自己的学习的路程，如果遗漏或是错误观点，望指正！！