二、react安装前端性能检测工具 --- Web Vitals

1、什么是【Web Vitals】

web-vitals是Google发起的，旨在提供各种质量信号的统一指南，我们相信这些质量信号对提供出色的网络用户体验至关重要。
可获取三个关键指标（CLS、FID、LCP），两个辅助指标（FCP、TTFB）。

2、安装

yarn add web-vitals
yarn dev 重新执行下，避免依赖没有生效

3、配置

在项目根目录 src 下新建 reportWebVitals.ts

这是给【onPerfEntry】添加的类型
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry: ReportHandler) => {
  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;

4、使用

打开项目根目录 src/main.tsx文件
//引入刚才的文件
import reportWebVitals from './reportWebVitals'
//使用
reportWebVitals(console.log)

5、安装成功后的效果展示

散会…