SPA(单页应用)首屏加载慢的优化方案

一. 什么是首屏加载时间？

首屏加载时间是指浏览器从相应用户输入网址到首屏内容渲染完成的时间。
整个网站并不需要全部加载完成，但需要展示当前可视窗口中的内容，也就是首屏。
从用户的角度来说就是：“输入网址到看到页面具体内容的速度”。
首屏加载时间可以说是用户体验中最重要的环节。

二. 查看我们应用的首屏加载时间?

1. 通过 window 下面的一个api performance 计算

performance 对象中可以获取到当前页面与性能相关的信息

我们打印看一下 performance 对象

// 计算首屏加载的时间(s)
let awiatTime = (performance.timing.domComplete - performance.timing.navigationStart) / 1000;

2. Chrome控制台中的Network直接查看

三. 首屏加载慢的原因？

1. 网络延迟
2. 入口文件体积过大
3. 资源重复请求加载
4. 加载脚本过程中，渲染堵塞。

四. 优化方案

1. 网络延迟

换个好点的网

2. 入口文件体积过大

   1. 路由懒加载: 以函数的形式加载路由，这样就可以把各自的路由文件分别打包，只有在解析给定路由的时候才会加载对应的路由组件。
   2. 静态资源本地缓存: 合理使用 Web Storage；开启 cdn 加速，缓存静态资源；
   3. 按需加载： 平常使用的UI框架不要整个引入，只引入项目使用到的组件
   4. 图片压缩： 项目使用到的 icon图标，并不需要一张张存到本地，可以使用在线图标代替;

3. 资源重复请求加载

一个js脚本被多个路由引入，就造成了重复下载，多个包中就存在多段相同的代码(就是这段js脚本)
在webpack的config文件中，修改CommonsChunkPlugin的配置，设置minChunks为2表示会把使用2次以上的包抽离出来，放进公共依赖文件，避免了重复加载组件

4. 加载脚本过程中，渲染堵塞。

使用 SSR 也就是服务端渲染： 即组件和页面通过服务器生成html字符串，再发送到浏览器。vue可以使用Nuxt.js实现服务端渲染。