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 库是一个小型 (~1K) 模块化库，用于测量真实用户的所有 Web Vitals 指标，其方式与 Chrome 测量它们的方式并报告给其他 Google 工具（例如 Chrome 用户体验报告、Page Speed Insights、Search Console 的速度报告）。

它们分为两个标题；

1. 核心网络生命力

• 累积布局移位 ( CLS )
• 第一输入延迟 ( FID )
• 最大含量涂料 ( LCP )

2. 其他网络生命力

• 首次内容绘制 ( FCP )
• 到第一个字节的时间 ( TTFB )

更多细节-> https://github.com/GoogleChrome/web-vitals