Reportwebvitals.js: reportWebVitals.js: reportWebVitals.js: reportWebVitals.js: reportWebVitals.js: reportWebVitals.js: reportWebVitals.js: reportWebVitals.js I wonder what this is. The reportWebVitals.js content is as follows:

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;
Copy the code

Some familiar letters CLS, FID, FCP, LCP, TTFB are related to performance indicators. Then the third line introduces a web-Vitals library. Web-vitals was found on NPM and there is a document Measuring Performance on the create-React-app website describing the use of Web-vitals in the React project.

What is web – vitals

Web-vitals was started by Google to provide a unified guide to the kinds of quality signals that we believe are essential to providing a great web user experience. It can obtain three key indicators (CLS, FID, LCP) and two auxiliary indicators (FCP, TTFB). See the reference documentation below for the meaning of these metrics.

The use of the web – vitals

To view the document

Web – vitals of the test

• Method 1: Print on the console

Change the last line of the index.js file in the create-react-app project to

reportWebVitals(console.log);

Operating Projects:

Data collected by the console

• Method 2: Use Google Extensions

The installationweb-vitals-extension • Method 3: Report data to the server

The backend is needed to provide the interface and then upload the data to the server.

• Tip 4: Use Google’s API

Reference:gtag

You need to log in to your Google account, sign up for your project, bind your credit card… A series of operations.

Reference documentation

• Reading the next generation of Web performance experience and quality metrics • Web-Vitals-extension • Web-Vitals • Measuring – Performance