تابع reportWebVitals() در پروژه‌های React یک ابزار برای اندازه‌گیری عملکرد برنامه است که از Web Vitals، مجموعه‌ای از معیارهای عملکرد کاربرمحور که توسط گوگل تعریف شده‌اند، استفاده می‌کند. این معیارها به شما کمک می‌کنند تا تجربه کاربری وبسایت را بهینه کنید.

هدف reportWebVitals()

اندازه‌گیری عملکرد اپلیکیشن React: این تابع به شما امکان می‌دهد معیارهای عملکرد حیاتی مانند زمان بارگذاری (Loading Time)، تعاملی بودن (Interactivity) و ثبات چیدمان (Visual Stability) را ارزیابی کنید.

ارسال داده‌های عملکردی: داده‌های جمع‌آوری‌شده می‌توانند برای سرویس‌های مانیتورینگ یا تحلیل مانند Google Analytics ارسال شوند.

نحوه عملکرد

تابع reportWebVitals() به صورت پیش‌فرض در پروژه‌هایی که با create-react-app ایجاد شده‌اند، تنظیم شده است و در فایل index.js یا index.tsx موجود است.

این تابع با استفاده از پکیج web-vitals اطلاعاتی در مورد معیارهای زیر جمع‌آوری می‌کند:

Largest Contentful Paint (LCP): مدت‌زمانی که طول می‌کشد تا بزرگ‌ترین المان قابل مشاهده بارگذاری شود.

First Input Delay (FID): مدت‌زمانی که بین تعامل کاربر و واکنش برنامه طول می‌کشد.

Cumulative Layout Shift (CLS): مقدار تغییرات غیرمنتظره چیدمان در صفحه.

Time to First Byte (TTFB): مدت‌زمانی که طول می‌کشد تا اولین بایت داده از سرور به مرورگر برسد.

First Contentful Paint (FCP): زمان لازم برای نمایش اولین محتوای قابل مشاهده.

استفاده از reportWebVitals()

تابع reportWebVitals() به این صورت در فایل index.js تعریف می‌شود:

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// استفاده از reportWebVitals
reportWebVitals(console.log);
  • اینجا console.log به عنوان تابع کال‌بک تعریف شده است که داده‌های Web Vitals را در کنسول چاپ می‌کند.
  • شما می‌توانید به جای console.log، داده‌ها را به یک سرویس مانیتورینگ ارسال کنید. مثلاً:
reportWebVitals((metric) => {
  fetch('https://your-analytics-endpoint', {
    method: 'POST',
    body: JSON.stringify(metric),
    headers: { 'Content-Type': 'application/json' },
  });
});

نکات کلیدی

اختیاری است: اگر به داده‌های عملکردی نیاز ندارید، می‌توانید این تابع را حذف کنید.

برای تحلیل تجربه کاربری مهم است: استفاده از Web Vitals برای بهینه‌سازی عملکرد و تجربه کاربری بسیار مفید است.

سازگار با ابزارهای تحلیل: داده‌ها می‌توانند به ابزارهایی مانند Google Analytics یا Sentry ارسال شوند.

نتیجه

تابع reportWebVitals() برای اندازه‌گیری عملکرد و بهینه‌سازی تجربه کاربری طراحی شده و در پروژه‌های بزرگ یا اپلیکیشن‌های حساس به عملکرد می‌تواند بسیار مفید باشد.