نحوه سرعت بخشیدن به برنامه های React با تقسیم کد

بیاموزید که چگونه تقسیم کد می تواند عملکرد و سرعت برنامه React شما را افزایش دهد.

آیا بارگذاری برنامه React شما خیلی کند است یا خیلی طول می کشد؟ اگر چنین است، ممکن است بخواهید از تکنیکی به نام تقسیم کد استفاده کنید. این تکنیک در بهبود سرعت بارگذاری و عملکرد برنامه های React بسیار موثر است. اما تقسیم کد چیست؟ و چگونه انجام می شود؟

تقسیم کد چیست؟

یک برنامه معمولی React شامل ده ها مؤلفه (و کد) است. اما وقتی برای اولین بار این کامپوننت ها را بارگذاری می کنید، نیازی به بارگذاری بیشتر آنها ندارید. تقسیم کد مستلزم تقسیم بخش های مختلف برنامه شما و بارگیری آنها در صورت نیاز است. این بسیار کارآمدتر از بارگیری کل برنامه به طور همزمان است.

یک برنامه React را در نظر بگیرید که دارای سه صفحه است: صفحه اصلی، صفحه درباره و صفحه محصولات. وقتی در صفحه اصلی هستید، بارگیری صفحه درباره یا صفحه محصولات فایده ای ندارد. زیرا شما در واقع هنوز در آن صفحات نیستید. ایده تقسیم کد این است که مطمئن شوید کد را فقط در صورت نیاز بارگیری می کنید.

یک صفحه وب را در مرورگر وب خود باز کنید و سپس DevTools را باز کنید (برای باز کردن آن در Google Chrome می توانید روی F12 روی صفحه کلید خود کلیک کنید). سپس به تب Source بروید. در آنجا تمام کدهایی را که در حین حرکت به صفحه دانلود شده است، پیدا خواهید کرد. بدون تقسیم کد، مرورگر تمام فایل های پروژه شما را در بارگذاری اولیه صفحه دانلود می کند. این می تواند سرعت وب سایت شما را در صورتی که حاوی فایل های زیادی باشد کند کند.

وقتی پروژه شما بزرگتر و بزرگتر می شود، تقسیم کد به ویژه مفید می شود. این به این دلیل است که دانلود کل فایل های برنامه به طور همزمان می تواند زمان زیادی را ببرد. بنابراین تقسیم آن کاملاً سودمند خواهد بود.

بهترین بخش در مورد تقسیم کد این است که می توانید بارگذاری مؤلفه ها و همچنین توابع را به تاخیر بیندازید. راهنمای مقدماتی ما در مورد ReactJS اجزاء و عملکردها را به طور عمیق توضیح می دهد که در صورت نیاز به یک تجدید کننده.

توابع تقسیم کد: با استفاده از Dynamic Import

وضعیت زیر را در نظر بگیرید. شما می خواهید صفحه اصلی شما یک دکمه داشته باشد. وقتی روی دکمه کلیک می کنید، می خواهید مجموع 2 و 2 (که 4 است) را هشدار دهید. بنابراین شما یک کامپوننت Home.js ایجاد می کنید و نمای صفحه اصلی خود را تعریف می کنید.

در این صورت شما دو گزینه دارید. ابتدا می توانید کد اضافه کردن اعداد را در بالای فایل Home.js وارد کنید. اما مشکل اینجاست. اگر بخواهید تابع را در بالای فایل وارد کنید، حتی زمانی که روی دکمه کلیک نکرده باشید، کد بارگیری می شود. یک رویکرد بهتر این است که تابع sum() را تنها با کلیک بر روی دکمه بارگیری کنید.

برای رسیدن به این هدف، باید یک ایمپورت پویا انجام دهید. این بدان معنی است که شما تابع sum() را به صورت درون خطی در عنصر دکمه وارد خواهید کرد. در اینجا کد همان است:

export default function Home() { 
 return ( 
   <div className="Home"> 
     <h1>HomePage</h1>
     <button onClick={() => {
       import("../sum.js").then((module) => {
         alert(module.sum(2, 2))
       })
     }}
     >
       Sum both numbers
     </button> 
  </div> 
 ); 
}

اکنون مرورگر فقط با کلیک روی دکمه ماژول sum.js را دانلود می کند. این باعث بهبود زمان بارگذاری صفحه اصلی می شود.

اجزای تقسیم کد: با استفاده از React.lazy و Suspense

با استفاده از تابع ()lazy می توانید کامپوننت ها را در React تقسیم کنید. بهترین مکان برای انجام تقسیم کد داخل روتر شما خواهد بود. زیرا اینجا جایی است که اجزای سازنده را به مسیرهای برنامه خود نگاشت می کنید. در صورت نیاز به رفرش، می توانید راهنمای ما را در مورد نحوه ساخت یک برنامه تک صفحه ای با React Router بخوانید.

فرض کنید برنامه شما دارای یک بخش Home، About و Products است. هنگامی که در مؤلفه Home هستید، بارگیری مؤلفه درباره یا مؤلفه محصولات فایده ای ندارد. بنابراین باید آنها را از مسیر Home جدا کنید. کد زیر نحوه دستیابی به آن را نشان می دهد:

ابتدا باید توابع و اجزای مورد نیاز را از ماژول‌های react و react-router-dom وارد کنید:

import { Routes, Route, Outlet, Link } from "react-router-dom";
import { lazy, Suspense } from "react";

در مرحله بعد، باید کامپوننت ها را به صورت پویا با استفاده از تابع lazy() وارد کنید:

const Home = lazy(() => import("./components/Home"));
const About = lazy(() => import("./components/About"));
const Products = lazy(() => import("./components/Products"));

بعد، طرح بندی (منوی ناوبری) را تنظیم کنید. از مؤلفه برای رندر کردن مؤلفه ای که با مسیر فعلی (صفحه اصلی، درباره یا مؤلفه محصولات) مطابقت دارد، استفاده کنید:

function NavWrapper() {
  return (
    <>
      <nav style={{ display: "flex", gap: "1rem" }}>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/products">Products</Link>
      </nav>
      <Suspense fallback={<h1>Loading...</h1>}>
        <Outlet />
      </Suspense>
    </>
  );
}

می بینید که اجزا را داخل می پیچیم. این به React می‌گوید که همه چیز درون پتانسیل بارگذاری تنبلی را دارد، به این معنی که ممکن است فوراً در دسترس نباشد. به همین دلیل کامپوننت Suspense دارای خاصیت بازگشتی است. در مورد ما، مقدار متن ساده ای است که می گوید “در حال بارگیری…”. بنابراین در حالی که هر یک از صفحات در حال دانلود هستند، می‌گویند بارگذاری روی صفحه نمایش داده می‌شود.

در نهایت مسیر را تنظیم کنید:

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<NavWrapper />}>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />} />
        <Route path="/about" element={<About />} />
      </Route>
    </Routes>
  );
}

اکنون وقتی از صفحه اصلی بازدید می کنید، مرورگر فقط فایل Home.js را بارگیری می کند. به همین ترتیب، وقتی روی پیوند About در منوی پیمایش کلیک می‌کنید تا به صفحه About بروید، مرورگر فقط فایل About.js را بارگیری می‌کند. این برای صفحه محصولات نیز یکسان است.

تقسیم کد مشروط

اغلب اوقات ممکن است محتوایی در صفحه خود داشته باشید که فقط برای کاربران خاصی قابل اجرا باشد. به عنوان مثال، در صفحه اصلی خود، می‌توانید بخشی با داده‌های مدیریتی داشته باشید که مختص کاربران مدیریت است. این می‌تواند یک داشبورد مدیریت باشد که برای کاربران مدیر نمایش داده می‌شود، اما برای کاربران عادی نه.

در این مورد، شما نمی خواهید همه آن داده ها را هر بار نشان دهید. در این مورد، می‌توانید از تکنیک تقسیم کد استفاده کنید تا مطمئن شوید که فقط در صورتی آن اطلاعات را نشان می‌دهید که این شخص یک ادمین باشد.

این کد به شکل زیر است:

import { lazy, Suspense } from "react";
const AdminData = lazy(() => import("./AdminData"));

export default function Home() { 
  const [isAdmin, setIsAdmin] = useState(false)

  return ( 
   <div className="Home"> 
     <h1>HomePage</h1>
     <button onClick={() => setIsAdmin(prev => !prev)}>
       Toggle Admin
     </button> 

    <Suspense fallback={<h1>Loading...</h1>}>
      {isAdmin ? <AdminData /> : <h2> Not the Admin </h2>} 
    </Suspense>
  </div> 
 ); 
}

حالا وقتی روی دکمه جابجایی کلیک می کنید، isAdmin روی true تنظیم می شود. در نتیجه، برنامه را نشان می دهد که با تنبلی بارگذاری می شود. اما اگر کاربر مدیر نیستید، برنامه هرگز AdminData.js را دانلود نخواهد کرد زیرا نیازی به آن نخواهد داشت.

تقسیم کد شرطی از همان مفهوم رندر شرطی در React استفاده می کند.

مفاهیم پیشرفته تقسیم کد

یکی از تکنیک های پیشرفته ای که می توانید هنگام تقسیم کد فعال کنید، انتقال است. قلاب useTransition() به شما امکان می‌دهد به‌روزرسانی‌های غیر فوری را انجام دهید که تا زمانی که به‌روزرسانی به پایان نرسد، رابط کاربری شما تغییر نخواهد کرد.

ابتدا قلاب را وارد می کنید:

import {useTransition} from "react"

سپس قلاب را صدا می زنید که isPending و startTransition را برمی گرداند:

const [isPending, startTransition] = useTransition()

در نهایت، کد به روز رسانی حالت خود را در startTransition():

startTransition(() => {
  setIsAdmin((prev) => !prev)
})

اکنون رابط کاربری واقعی شما مقدار بازگشتی (متن بارگیری) را نمایش نمی دهد تا زمانی که مرورگر انتقال را به پایان برساند. این بدان معناست که باید منتظر بماند تا مرورگر کل داده‌های مدیریت را دانلود کند و قبل از اینکه تمام داده‌ها را نشان دهد.

راه های دیگر برای بهینه سازی عملکرد React

این مقاله به تقسیم کد به عنوان روشی برای بهبود عملکرد برنامه های React شما پرداخت. اما چندین روش دیگر نیز وجود دارد که می تواند دانش لازم را برای ایجاد برنامه های کاربردی قوی به شما بدهد.

منبع مقاله