reactjs - create-react-app に付属する web-vitals とは何ですか?

Question

新しく作成した Reactjs アプリケーションsrc/reportWebVitals.jsに index.js で呼び出されているファイルがあることを認識しました。このファイル/コードは何のためのものですか?

const reportWebVitals = onPerfEntry => {
  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;

Answer 1

これは、デフォルトで付属するユーザー エクスペリエンス メトリックを取得および測定するために使用されるサードパーティ ライブラリですcreate-react-app。

Web Vitals ライブラリは、実際のユーザーのすべての Web Vitals 指標を測定するための小さな (~1K) モジュラー ライブラリであり、Chrome によって測定され、他の Google ツール (Chrome ユーザー エクスペリエンスなど) に報告される方法と正確に一致します。レポート、ページ スピード インサイト、Search Console のスピード レポート）。

それらは 2 つのタイトルの下にグループ化されます。

1. コア Web バイタル

• 累積レイアウト シフト ( CLS )
• 最初の入力遅延 ( FID )
• 最大コンテンツ ペイント ( LCP )

2. その他の Web バイタル

• 最初のコンテンツ ペイント ( FCP )
• 最初のバイトまでの時間 ( TTFB )

詳細については -> https://github.com/GoogleChrome/web-vitals