与 create-react-app 一起出现的 web-vitals 是什么？

Question

我刚刚发现我新创建的 Reactjs 应用程序有一个文件 src/reportWebVitals.js，它在 index.js 中被调用。这个 file/pice 代码是做什么用的？

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

这是一个 third-party 库，用于捕获和衡量作为默认值与 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)

2. 其他 Web Vitals

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

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