性能测量

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

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

reportWebVitals(console.log);

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

Web 指标

Web 指标 是一组有用的指标，旨在捕获网页的用户体验。在 Create React App 中，使用第三方库来测量这些指标 (web-vitals).

要了解有关计算指标值时返回给函数的对象的更多信息，请参阅文档。该浏览器支持部分还解释了哪些浏览器受支持。

将结果发送到分析

使用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 的更多信息这里。