我们一般搭建一个react项目的时候，在项目的根目录下有一个reportWebVitals.ts文件

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

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元素。（网页加载体验）

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

具体参考 https://create-react-app.dev/docs/measuring-performance/  

衡量性能

默认情况下，Create React App 包含一个性能中继器，允许您使用不同的指标来测量和分析应用程序的性能。

要测量任何受支持的指标，您只需将函数传递到 reportWebVitals 函数中index.js：

reportWebVitals(console.log);

当页面上完成任何量度的最终值计算时，将触发此函数。您可以使用它将任何结果记录到控制台或发送到特定终端节点。

Web 指标​

Web Vitals 是一组有用的指标，旨在捕获网页的用户体验。在 Create React App 中，第三方库用于测量这些指标 （web-vitals）。要了解有关计算度量值时返回给函数的对象的更多信息，请参阅文档。浏览器支持 部分还说明了支持的浏览器。

将结果发送到 Analytics

使用 reportWebVitals 函数，您可以将任何结果发送到分析终端节点，以衡量和跟踪您网站上的真实用户性能。例如：

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  const url = 'https://example.com/analytics';

  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { body, method: 'POST', keepalive: true });
  }
}

reportWebVitals(sendToAnalytics);

注意：如果您使用 Google Analytics，请使用 id 值，以便更轻松地手动构建量度分布（计算百分位数等）。

function sendToAnalytics({ id, name, value }) {
  ga('send', 'event', {
    eventCategory: 'Web Vitals',
    eventAction: name,
    eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
    eventLabel: id, // id unique to current page load
    nonInteraction: true, // avoids affecting bounce rate
  });
}

reportWebVitals(sendToAnalytics);

在此处阅读有关将结果发送到 Google Analytics 的更多信息。