React項目使用reportWebVitals做性能監控

CRA的腳手架升級后，在項目根目錄下增加了一個新的文件 – 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-vitals的庫
create-react-app 官網中也有一篇文檔Measuring Performance來描述在react項目中使用web-vitals。

web-vitals是Google發起的，旨在提供各種質量信號的統一指南，我們相信這些質量信號對提供出色的網絡用戶體驗至關重要。
其可獲取三個關鍵指標（CLS、FID、LCP）和兩個輔助指標（FCP、TTFB）。這些指標的含義可以查看后面的參考文檔。

web-vitals 的使用

方法一：在控制台打印
將create-react-app項目中的index.js文件最后一行改為：

reportWebVitals(console.log);

運行項目，Chrome瀏覽器F12即可查看控制台采集到的數據

 

 方法二：使用谷歌瀏覽器擴展工具

安裝web-vitals-extension
方法三：數據上報到服務器
需要后端配合提供接口，然后將數據上傳到服務器。