最近在用react搭建項目，發(fā)現(xiàn)react的腳手架升級了，在項目根目錄下發(fā)現(xiàn)了一個新的文件 – reportWebVitals.js。很好奇這是個啥。
reportWebVitals.js內(nèi)容如下：

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這些跟性能指標有些關(guān)系的。
然后第三行有引入一個web-vitals的庫。在npm上搜到了web-vitals
create-react-app 官網(wǎng)中也有一篇文檔Measuring Performance來描述在react項目中使用web-vitals。

• web-vitals是什么
  web-vitals是Google發(fā)起的，旨在提供各種質(zhì)量信號的統(tǒng)一指南，我們相信這些質(zhì)量信號對提供出色的網(wǎng)絡(luò)用戶體驗至關(guān)重要。
  其可獲取三個關(guān)鍵指標（CLS、FID、LCP）和兩個輔助指標（FCP、TTFB）。這些指標的含義可以查看后面的參考文檔。
• web-vitals 的使用
  查看文檔
• web-vitals 的測試
  ①方法一：在控制臺打印
  將create-react-app項目中的index.js文件最后一行改為

reportWebVitals(console.log);

運行項目：
控制臺采集到的數(shù)據(jù)

image.png

image.png