React项目下的reportWebVitals.js文件

在使用react 搭建项目时，发现react的脚手架工具做了升级处理，在项目根目录文件下移除了registerServiceWorker.js 新增了reportWebVitals.js
reportWebVitals.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;

它的里面有： CLS、FID、FCP、LCP、TTFB这些与性有关的指标。
其中引入了一个web-vital 的库。在npm上搜到了web-vitals
create-react-app 官网中也有一篇文档Measuring Performance来描述在react项目中使用web-vitals。

• web-vitals是什么
  web-vitals 是由Google 发起的 旨在提供各种质量信号的统一指南。我们相信这些信号对提供出色的网络用户体验至关重要。
  其中可获取三个关键指标（CLS 、FID、LCP）和两个辅助指标（FCP、TTFB）这些指标的含义可以看相关文档。
• web-vitals的使用 查看文档。
• web-vitals的测试
  在控制台打印 将cerate-react-app 项目中的index.js 文件最后一行改为
  reportWebVitals(console.log)
  运行项目 查看控制台采集到的数据。
  image.png 。