一：什么是首屏加载
首屏时间，指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成时间，这时整个网页不一定要全部渲染完成，但是要展示当前视窗需要的内容
首屏加载可以说是用户体验中最重要的环节
如果计算首屏时间
利用performance.timing提供的数据。通过DOMContentLoad或者performance来计算首屏时间
二：加载慢的原因
- 网络延时问题
- 资源文件体积是否过大
- 资源是否重复发送请求去加载
- 加载脚本的时候，渲染内容堵塞
三：解决方案
常见的SPA首屏优化方式
- 减少入口文件积
- 静态资源本地缓存
- UI框架按需加载
- 图片资源的压缩
- 组件重复打包
- 开启GZip压缩
- 使用SSR
减小入口文件体积
路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候单独打包路由，使得入口文件变小，加载速度大大增加。
vue-router配置路由的时候，采用动态加载路由的形式,以函数的形式加载路由，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会加载路由组件。
静态资源本地缓存
后端返回资源问题：
- 采用HTTP缓存，设置cache-control，Last-modified，Etag等响应头
- 采用Service Worker离线缓存
前端合理利用localStorage
UI框架按需加载
组件重复打包
比如a.js文件是一个常用的库，多个路由使用了a.js,这就造成了重复下载
解决方案：webpack的config文件，修改CommonsChunkPlugin的配置（提取公共代码），里面可以设置使用超过多少次以上的包抽离出来，放进公共依赖文件，避免了重复加载组件
图片资源的压缩
可以对图片进行压缩
图标等，可以使用在线字体图标，或者雪碧图。根本是减轻http请求压力
开启GZip压缩
安装compression-webpack-plugin，进行一个生产环境的压缩配置。
前提是服务器也需要配置，发送请求的浏览器支持gzip
使用SSR 服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器
小结： 总体其实分为两部分：页面渲染优化和资源加载优化
