SPA首屏加载优化

首屏加载

就是从输入网址址，到所有资源渲染到页面，首屏加载可以说是用户体验中最重要的环节，由于单页面应用，资源体积过大，首次进行全部加载耗时，导致白屏

加载过慢

在页面渲染的过程，导致加载速度慢的因素可能如下：

• 网络延时问题
• 资源文件体积是否过大
• 资源是否重复发送请求去加载了
• 加载脚本的时候，渲染内容堵塞了

解决方法

减小入口文件体积

比如路由懒加载和异步组件，配置路由时采用动态加载路由形式

 {
    path: '/404',
    component: () => import('@/views/404'),
  },

静态资源本地缓存

采用强制缓存和协商缓存，设置Cache-Control, Last-Modified, Etag字段

合理利用localStorage

UI框架按需加载

例如使用element-ui框架时， 使用组件不要全部将整个框架导入，应该按需导入

全部导入：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

按需导入：

import { Button, Input } from 'element-ui';
Vue.use(Button)
Vue.use(Input)

图片资源的压缩

将小图片base64化，或者使用在线字体图标、雪碧图减少服务器压力

使用SSR

SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器

从头搭建一个服务端渲染是很复杂的, Vue应用建议使用Nuxt.js实现服务端渲染