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 一起使用的用户体验指标。

The web-vitals library is a tiny (~1K), modular library for measuring all the Web Vitals metrics on real users, in a way that accurately matches how they're measured by Chrome and reported to other Google tools (e.g. Chrome User Experience Report, Page Speed Insights, Search Console's Speed Report).

它们分为两个标题；

1. 核心网络活力

• 累积布局偏移 ( CLS )
• 首次输入延迟(FID)
• 最大的内容绘画 ( LCP )

1. 其他 Web Vitals

• 第一次内容丰富​​的绘画 ( FCP )
• 第一个字节的时间 ( TTFB )

了解更多详情 -> https://github.com/GoogleChrome/web-vitals