1.什么是SPA首屏加载?
浏览器从响应用户输入网址到首页加载完成的事间
计算首屏加载时间
通过DOMContentLoad或者performance 可以计算出首屏加载的时间
加载速度慢的原因
- 网络延时问题
- 资源文件体积过大
- 资源是可能重复请求加载
- 加载脚本的时候 渲染内容阻塞
常见的几种SPA 首页优化方案
- 减小入口体积文件
- 静态资源本地缓存
- UI 框架 按需加载
- 图片资源压缩
- 组件重复打包
- 开启 GZip压缩
- 使用SSR
减小入口文件体积
常用是路由懒加载,把不同的路由组件分割成不同的代码块,路由贝请求时单独打包路由,将入口文件变小,从而提高加载速度
以函数的方式加载路由 这样可以将路由文件各自打包只有在解析 给定路由的时候才会加载对应的路由组件
静态资源本地缓存
ui框架按需加载
组件重复打包
假设 A.js是一个常见的库 现在有多个路由使用了A.js文件 这就造成了重复下载 如何解决: 在 webpack的config 文件中 修改 ComonsChunkPligin的配置
图片资源的压缩
图片资源虽然不在编码过程中,但是它确是页面性能影响最大的因素 网页上所有的的图片都可以进行适当压缩 页面使用的icon 可以使用线上资源, 使用雪碧图将众多小图标合并在一张图上
SSR
服务器端渲染（Server-Side Rendering）是指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器 然后为其绑定状态和事件
但是 搭建服务端渲染很复杂 因此vue 应用建议使用NUxt.js实现服务端渲染
#总结 优化SPA首页加载速度的方法很多 基本分为两大类 ---资源加载优化 ----页面渲染优化
