測量效能

預設情況下，Create React App 包含效能中繼，可讓您使用不同指標測量並分析應用程式的效能。

若要測量任何受支援的指標，您只需傳遞一個函式至 index.js 中的 reportWebVitals 函式即可

reportWebVitals(console.log);

此函式在任何指標的最後值完成網頁上的計算時觸發。您可以使用此函式將任何結果記錄至主控台或傳送到特定端點。

網頁效能指標

網頁效能指標 是一組實用的指標，用於擷取網頁的使用者體驗。在 Create React App 中，使用第三方函式庫來測量這些指標 (網頁效能指標)。

要更瞭解在計算指標值時傳回給函式之物件，請參閱文件。 瀏覽器支援部分也說明了支援哪些瀏覽器。

傳送結果到分析工具

使用 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 的資訊。