一、什么是首屏加载
首屏时间（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)
标签：use,Vue,单页,首屏,UI,SPA,路由,加载 来源： https://www.cnblogs.com/zhanghaoqing/p/16411135.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。