我们忽略的react的代码reportWebVitals文件中的代码web-vitals是什么

我们一般搭建一个react项目的时候，在项目的根目录下的index.js文件会发现一段代码，有时候不知道要不要去掉，或者看着没用干脆去掉也不影响就去掉了的这一段代码如下：

注释大概是这样的：

// 如果你想要开始测量应用程序的性能，请传递一个函数记录结果（比如： reportWebVitals(console.log)）或者发送到分析终端，了解更多信息: bit.ly/CRA-vitals

具体我们来看一下reportWebVitals这个方法做了什么。

这里引入的是一个叫“web-vitals”的库

下载量蛮大的，这里估计每次安装一个react包都也连带着下一次web-vitals的库。下面我们来看看这个web-vitals是什么，做什么的，怎么用吧。

web-vitals是Google推出的用于衡量Web性能的指标的，目的就是帮助开发人员了解其网站的用户体验质量，并且提供有关如何改进的建议。其中反映了网站加载速度、交互性和稳定性等等方面的表现。

包含五个指标：

1、LCP(largest countentful paint): 衡量首次加载时的最大的可见元素的加载时间。目的是3秒或更快的加载时间。（最大内容渲染）

2、FID(first input delay): 衡量用户与网站交互的响应时间。目标是100毫秒或更少响应时间。(第一次输入事件延迟) （第一次交互）

3、CLS(cumulative layout shift): 衡量网站内容在加载过程中的视觉稳定性。目标是少于0.1的得分。也就是首屏页面渲染过程中所有元素结点相对原始位置所发生的位置偏移累积量。(布局偏移)

4、TTFB(time to first byte)： 衡量对资源的请求和响应的第一个字节开始和到达之间的指标。（网页加载体验）

5、FCP(first contentful paint): 指的是测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，“内容”值得是文本、图像（包括背景图像）、svg元素或者非白色canvas元素。（网页加载体验）

通过检测这些指标并对其进行优化，开发人员可以提高其网站的用户体验，减少页面加载时间，并增强网站的可用性和稳定性。

---

用法：

reportWebVitals(console.log)

在控制台可以看到采集到的数据:

或者使用谷歌扩展工具web-vitals-extension

或者接接口把数据上传到服务器。