React'ta reportWebVitals nasıl kullanılır?

React uygulamalarında kullanıcı deneyimini optimize etmek ve performans metriklerini izlemek, projenizin başarısı için kritik öneme sahiptir. Bu noktada, `reportWebVitals` fonksiyonu devreye girer. Bu fonksiyon, web uygulamanızın performansını ölçmenize olanak tanır ve kullanıcı etkileşimleri hakkında önemli veriler sunar. Bu yazıda, `reportWebVitals` kullanımına dair adım adım bir rehber sunarak, metriklerinizi nasıl etkili bir şekilde takip edebileceğinizi inceleyeceğiz.

React'te

reportWebVitals

1. Web-vitals kütüphanesini kurmak.

   npm install web-vitals

   veya

   yarn add web-vitals

   komutlarıyla kütüphane yüklenir.

2. reportWebVitals.js

   dosyası oluşturmak. React projesinde

   reportWebVitals.js

   adında bir dosya oluşturulur.
3. Metrikleri ölçmek.

   reportWebVitals.js

   dosyasına aşağıdaki kod eklenir :

import { getCLS, getFID, getLCP, getFCP, getTTFB } from 'web-vitals';

function reportWebVitals(onPerfEntry) {
   if (onPerfEntry && typeof onPerfEntry === 'function') {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getLCP(onPerfEntry);
       getFCP(onPerfEntry);
       getTTFB(onPerfEntry);
   }
}

export default reportWebVitals;
Kopyala

1. Web Vitals'ı React'e entegre etmek. Web Vitals, ana React dosyasına (

   index.js

   veya

   main.js

   ) entegre edilir. Dosya şu şekilde değiştirilir :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
   <React.StrictMode>
   <App />
   </React.StrictMode>,
   document.getElementById('root')
);
// Web Vitals'ı ölçmeye başlamak
reportWebVitals(console.log);
Kopyala

Bu ayarlamayla Web Vitals verileri tarayıcı konsolunda görüntülenir.

Analitik için veri göndermek (isteğe bağlı). Web Vitals verilerini bir Google Analytics gibi bir kontrol panelinde izlemek için

reportWebVitals

function sendToAnalytics(metric) {
   // Örnek: Google Analytics'e veri gönderme
   const body = JSON.stringify(metric);
Kopyala