برنامه‌های React خود را توربوشارژ کنید: با تکنیک‌های اثبات‌شده قفل اوج عملکرد را باز کنید

سلام توسعه دهندگان 👋، در چشم انداز به سرعت در حال تحول توسعه وب، React به عنوان یک نیروگاه برای ایجاد رابط های کاربری پویا و تعاملی ظهور کرده است. React با معماری مبتنی بر مؤلفه و DOM مجازی خود به توسعه دهندگان این امکان را می دهد تا برنامه های کاربردی قوی ایجاد کنند که مقیاس پذیر و کارآمد باشند. اما به عنوان توسعه دهندگان، ما اغلب از بهینه سازی برنامه ها غافل می شویم.

بهینه سازی اپلیکیشن به اندازه ساختن آن مهم است. در این مقاله، برخی از بهترین روش‌ها برای بهینه‌سازی اپلیکیشن React و نحوه پیاده‌سازی آن‌ها در پروژه‌های خود را مورد بحث قرار خواهیم داد.

تکنیک های بهینه سازی

بهینه سازی یک برنامه React.js برای تاخیر کم شامل ترکیبی از بهبود زمان بارگذاری و تعامل درک شده و واقعی است. در اینجا یک راهنمای جامع برای کمک به شما در بهینه سازی برنامه های React آورده شده است:

1. تقسیم کد و بارگذاری تنبل

با تقسیم کد خود، می توانید تنها بخش های ضروری برنامه خود را در صورت نیاز بارگذاری کنید، که می تواند زمان بارگذاری اولیه را به میزان قابل توجهی کاهش دهد و عملکرد کلی برنامه شما را بهبود بخشد. آن را با Suspense عملکرد و تجربه کلی را با پیاده‌سازی حالت‌های بارگذاری برای کاربران نهایی هنگام بارگیری مؤلفه افزایش می‌دهد.

• تقسیم کد: از import() پویا برای تقسیم کد خود به تکه های کوچکتر استفاده کنید و به برنامه اجازه دهید فقط قسمت های ضروری را بارگیری کند.

const OtherComponent = React.lazy(() => import("./OtherComponent"));

• React.lazy و Suspense: از React's Suspense برای کامپوننت هایی که با تنبلی بارگذاری می شوند، استفاده کنید.

<Suspense fallback={<div>Loading...</div>}>
  <OtherComponent />
</Suspense>

2. بهینه سازی مدیریت دولتی

• از Context API به طور عاقلانه استفاده کنید: در حالی که Context API برای انتقال وضعیت عالی است، استفاده بیش از حد برای تغییرات مکرر می تواند باعث رندرهای مجدد غیرضروری شود.

مثال: استفاده عاقلانه از Context API

در حالی که Context API برای انتقال وضعیت عالی است، استفاده بیش از حد برای تغییرات مکرر می تواند باعث رندرهای مجدد غیرضروری شود. در عوض، استفاده از کتابخانه‌های محلی محلی یا مدیریت دولتی مانند Redux یا Zustand را برای نیازهای پیچیده‌تر مدیریت دولتی در نظر بگیرید.

// Context API Example
const ThemeContext = React.createContext("light");

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme === "light" ? "#fff" : "#333" }}>
      Themed Button
    </button>
  );
}

در این مثال، ThemeContext برای انتقال حالت تم استفاده می شود. با این حال، اگر موضوع به طور مکرر تغییر می کند، ممکن است بهتر باشد آن را به صورت محلی در مولفه ای که به آن نیاز دارد مدیریت کنید یا از یک راه حل پیچیده تری برای مدیریت حالت استفاده کنید.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

3. از ابزارهای سنجش عملکرد استفاده کنید

• React Developer Tools: این یک راه عالی برای اندازه گیری عملکرد برنامه React شما است. از نمایه ساز در React DevTools برای شناسایی تنگناهای عملکرد استفاده کنید.

• APIهای عملکرد وب: از ابزارهایی مانند Lighthouse برای دریافت بینش در مورد عملکرد وب استفاده کنید. داشتن امتیاز کلی 80 و بالاتر به شما کمک می کند تا برنامه های کاربردی و مقیاس پذیر با تنگناهای بسیار کمی بسازید.

4. بهینه سازی رندر

بهینه سازی رندر در React برای حفظ یک رابط کاربری روان و پاسخگو بسیار مهم است. در اینجا چند استراتژی برای کمک به شما در دستیابی به این هدف وجود دارد:

• PureComponent و React.memo: این ابزارها به جلوگیری از رندرهای غیر ضروری کمک می کنند. PureComponent یک کلاس پایه برای اجزای کلاس است که یک مقایسه سطحی روی props و state پیاده سازی می کند. برای اجزای تابع، React.memo می توان از آن برای بسته بندی کامپوننت استفاده کرد و اطمینان حاصل کرد که فقط زمانی که پایه های آن تغییر می کند دوباره رندر می شود.

// Using PureComponent for class components
class MyComponent extends React.PureComponent {
  render() {
    /* render using props */
  }
}

// Using React.memo for function components
const MyComponent = React.memo((props) => {
  /* render using props */
});

• بهینه سازی آشتی: فرآیند تطبیق React به شدت به کلیدها برای شناسایی موارد تغییر، اضافه یا حذف شده است. اطمینان از پایدار و منحصربه‌فرد بودن کلیدها به React کمک می‌کند تا رندرهای مجدد را به حداقل برساند و DOM را به‌طور مؤثر به‌روزرسانی کند.

{
  items.map((item) => <Item key={item.id} {...item} />);
}

با اجرای این تکنیک ها، می توانید تعداد رندرهای غیرضروری در برنامه خود را به میزان قابل توجهی کاهش دهید که منجر به عملکرد بهتر و تجربه کاربری روان تر می شود.

5. بهینه سازی شبکه

• تجزیه و تحلیل بسته نرم افزاری از ابزارهایی مانند آنالایزر بسته نرم افزاری Webpack برای شناسایی و حذف وابستگی های بزرگ یا غیر ضروری. آن را به عنوان یک ذره بین برای بسته کد خود در نظر بگیرید که نشان می دهد کدام وابستگی بیشترین فضا را اشغال می کند. یک بسته سبک تر به معنای زمان بارگذاری سریعتر است!

• HTTP/2: اگر سرور شما از آن استفاده نمی کند HTTP/2 با این حال، زمان ارتقا رسیده است! این پروتکل با اجازه دادن به ارسال چندین درخواست به طور همزمان از طریق یک اتصال، برنامه شما را شارژ می کند. دیگر نیازی به انتظار در صف برای بارگیری دارایی ها نیست – مانند دریافت تسویه حساب سریع برای منابع برنامه شما است.

• ذخیره سازی طولانی مدت: با استفاده از هدرهای Cache-Control ذخیره سازی دارایی ها در مرورگر برای مدت طولانی تری به شما کمک می کند تا زمان و پهنای باند سرویس دهی به آنها را کاهش دهید. این کار بارگیری های تکراری را کاهش می دهد و زمان بارگذاری را برای کاربران بازگشتی بهبود می بخشد.

• CDN و بهینه سازی دارایی: A شبکه تحویل محتوا (CDN) مانند داشتن یک مرکز تحویل در هر شهر بزرگ برای فایل‌های استاتیک برنامه شما – خواه تصاویر، CSS یا جاوا اسکریپت باشد. CDN ها دارایی ها را از سرورهای نزدیک به کاربر ارائه می دهند و زمان بارگذاری را کاهش می دهند. علاوه بر آن، ابزارهایی مانند ImageOptim می تواند به کوچک کردن اندازه تصویر شما بدون از دست دادن کیفیت کمک کند، اطمینان حاصل شود که برنامه شما واضح به نظر می رسد و به سرعت بارگذاری می شود.

6. از یک لیست مجازی استفاده کنید

• React Virtualized یا React Window: ارائه لیست های طولانی؟ از کتابخانه هایی مانند React Virtualized یا پنجره واکنش برای نشان دادن فقط موارد قابل مشاهده این را نگه می دارد DOM سبک وزن است و اسکرول را صاف می کند!

7. رندرهای غیر ضروری را به حداقل برسانید

• از shouldComponentUpdate و React.PureComponent استفاده کنید: با پیاده سازی از رندرهای مجدد غیر ضروری جلوگیری کنید shouldComponentUpdate یا با استفاده از React.PureComponent. این تضمین می کند که اجزای شما فقط در صورت نیاز به روز می شوند و عملکرد را افزایش می دهند.

• قطعه برای جلوگیری از گره های اضافی: از افزودن غیر ضروری خودداری کنید گره های DOM با پیچاندن اجزای کودک در . DOM شما را تمیز و کارآمد نگه می دارد.

<React.Fragment>
  <ChildComponent />

  <AnotherChildComponent />
</React.Fragment>

8. CSS را بهینه کنید

• راه حل های CSS-in-JS: از کتابخانه هایی مانند استفاده کنید اجزای سبک یا عاطفه برای کمک به گسترش CSS خود و به حداقل رساندن تأثیر آن بر DOM در حین بهینه سازی برای اندازه های بسته.

• CSS تقسیم کد: CSS را بر اساس اجزا یا مسیرها با استفاده از ابزارهایی مانند Webpack تقسیم کنید. این تضمین می‌کند که کاربران فقط سبک‌هایی را که برای صفحه‌ای که بازدید می‌کنند دانلود می‌کنند و زمان بارگذاری اولیه را کاهش می‌دهد.

• CSS را کوچک کنید: از ابزارهایی مانند cssnano یا PostCSS برای حذف فضای خالی، نظرات و قوانین اضافی، کوچک کردن فایل‌های CSS برای تحویل سریع‌تر.

9. بهینه سازی رندر سمت سرور (SSR)

• از Next.js استفاده کنید: ساده سازی بهینه سازی عملکرد با Next.js، که شامل پشتیبانی داخلی برای رندر سمت سرور، تولید سایت استاتیک و سایر بهترین روش‌ها برای سریع‌تر کردن برنامه React شما می‌شود.

• CSS بحرانی و پاسخ‌های متناسب: فقط CSS و محتوای مورد نیاز برای نمای فعلی را بارگیری کنید و از رنگ‌های اولیه سریع‌تر و تجربه کاربری روان‌تر اطمینان حاصل کنید. مثل این است که فقط وسایل ضروری را در یک بشقاب نقره ای سرو کنید!

10. سایر بهترین روش ها

• ورودی کاربر Throttle and Debounce: از تکنیک هایی مانند گاز دادن و منحرف کننده محدود کردن تعداد دفعات انجام اقدامات توسط ورودی کاربر، بهبود عملکرد با کاهش رندرها و رویدادهای غیرضروری.

• کارگران وب: بارگیری محاسبات فشرده به کارگران وب برای رایگان نگه داشتن رشته اصلی، اطمینان حاصل کنید که برنامه شما حتی در هنگام پردازش سنگین پاسخگو می ماند.

• پیکربندی محیط: مجموعه NODE_ENV به “تولید” در پیکربندی Webpack خود برای فعال کردن رندر بهینه React، به حداقل رساندن اندازه بسته و افزایش عملکرد برای کاربران.

نتیجه گیری

در خاتمه، با اجرای استراتژی های ذکر شده در این مقاله، شما این پتانسیل را دارید که تأثیر قابل توجهی بر عملکرد برنامه های React خود داشته باشید. این بهینه‌سازی‌ها نه تنها می‌توانند تأخیر را کاهش دهند و تجربه کاربر را بهبود بخشند، بلکه می‌توانند پیشرفت‌های قابل اندازه‌گیری را نیز ایجاد کنند که کاربران از آن استقبال خواهند کرد. همانطور که به تنظیم دقیق و اصلاح برنامه های خود ادامه می دهید، اهمیت اندازه گیری تأثیر این بهینه سازی ها را به خاطر بسپارید تا مطمئن شوید که آنها واقعاً نتایج مورد نظر را ارائه می دهند. با این ابزارها و تکنیک هایی که در اختیار دارید، سفر به سمت ایجاد برنامه های React سریع و جذاب به یک ماجراجویی هیجان انگیز و ارزشمند تبدیل می شود.

اگر تا به حال آن را خوانده اید، بسیار متشکرم که خواندید!، لطفا نظرات خود را در صورت وجود کامنت بگذارید ✌️

فراموش نکنید که این وبلاگ را برای آینده نشانه گذاری کنید 📌

ارتباط با نویسنده: