在使用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
