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

发布时间：2022-08-11 文章分类：编程知识 投稿人：王小丽 字号： 默认 | 大 | 超大 打印

一、什么是首屏加载

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

二、加载慢的原因

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

三、解决方案

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

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

routes:[
    path: 'home',
    name: 'hoem',
    component: () => import('./components/home.vue')
]
后端返回资源问题：
采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头
采用Service Worker离线缓存
前端合理利用localStorage

在日常使用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)
标签 , ,