在使用react 搭建項(xiàng)目時(shí)，發(fā)現(xiàn)react的腳手架工具做了升級(jí)處理饭庞，在項(xiàng)目根目錄文件下移除了registerServiceWorker.js 新增了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)的指標(biāo)庆亡。
其中引入了一個(gè)web-vital 的庫(kù)匾乓。在npm上搜到了web-vitals
create-react-app 官網(wǎng)中也有一篇文檔Measuring Performance來(lái)描述在react項(xiàng)目中使用web-vitals。
- web-vitals是什么
web-vitals 是由Google 發(fā)起的 旨在提供各種質(zhì)量信號(hào)的統(tǒng)一指南又谋。我們相信這些信號(hào)對(duì)提供出色的網(wǎng)絡(luò)用戶體驗(yàn)至關(guān)重要拼缝。
其中可獲取三個(gè)關(guān)鍵指標(biāo)（CLS 、FID彰亥、LCP）和兩個(gè)輔助指標(biāo)（FCP咧七、TTFB）這些指標(biāo)的含義可以看相關(guān)文檔。 - web-vitals的使用 查看文檔任斋。
- web-vitals的測(cè)試
在控制臺(tái)打印 將cerate-react-app 項(xiàng)目中的index.js 文件最后一行改為
reportWebVitals(console.log)
運(yùn)行項(xiàng)目 查看控制臺(tái)采集到的數(shù)據(jù)继阻。
。image.png
