SPA（单页应用）首屏加载速度慢怎么解决？

一、什么是首屏加载

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容，首屏加载可以说是用户体验中最重要的环节

二、加载慢的原因

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

• 网络延时问题

• 资源文件体积是否过大

• 资源是否重复发送请求去加载

• 加载脚本的时候，渲染内容堵塞

三、解决方案

常见的几种SPA首屏优化方式

• 减小入口文件积
• 静态资源本地缓存
• UI框架按需加载
• 图片资源的压缩
• 组件重复打包
• 开启GZip压缩

 

 

• 减小入口文件体积

常用的手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加，在vue-router配置路由的时候，采用动态加载路由的形式

routes:[ 
    path: 'home',
    name: 'hoem',
    component: () => import('./components/home.vue')
]

• 静态资源本地缓存

后端返回资源问题：

采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头

采用Service Worker离线缓存

前端合理利用localStorage

• UI框架按需加载

在日常使用UI框架，例如element-UI、或者antd，我们经常性直接饮用整个UI库

 

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

但实际上我用到的组件只有按钮，分页，表格，输入与警告 所以我们要按需引用

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