Lazy Loading Routes در React: کلیدی برای بارگذاری سریعتر

بارگذاری تنبل تکنیکی است که برای بهبود عملکرد برنامه های کاربردی وب با بارگذاری منابع ضروری تنها در صورت نیاز استفاده می شود. در برنامه های React، بارگذاری تنبل را می توان با استفاده از React Router DOM برای بارگیری مسیرها به صورت ناهمزمان پیاده سازی کرد، بنابراین زمان بارگذاری اولیه برنامه بهبود می یابد.

React Router DOM یک کتابخانه محبوب است که برای مسیریابی در برنامه های React استفاده می شود. این به توسعه دهندگان اجازه می دهد تا مسیرها و مؤلفه های مرتبط با آنها را تعریف کنند که باید هنگام درخواست یک URL خاص ارائه شوند. به‌طور پیش‌فرض، React Router DOM همه مسیرها و مؤلفه‌های مرتبط با آن‌ها را هنگام بارگیری برنامه بارگیری می‌کند، که می‌تواند منجر به کاهش زمان بارگذاری برای برنامه‌های بزرگتر شود.

برای غلبه بر این مشکل، React قابلیتی به نام lazy را ارائه می‌کند که به توسعه‌دهندگان اجازه می‌دهد تا اجزا را تنها در صورت نیاز بارگذاری کنند. در این مقاله به نحوه پیاده سازی بارگذاری تنبل مسیرها در برنامه React می پردازیم.

مرحله 1: وابستگی ها

اولین قدم این است که React Router DOM را با استفاده از NPM یا Yarn نصب کنید. با اجرای دستور زیر می توانید آن را نصب کنید:

npm install react-router-dom

مرحله 2: یک کامپوننت تنبل ایجاد کنید

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

به عنوان مثال، فرض کنید یک جزء به نام داریم Dashboard که می خواهیم بارگذاری کنیم:

// @/pages/Dashboard.jsx
import React from "react";

// named export component
export const Dashboard = () => {
  return <h1>Dashboard</h1>;
}

// default export component
export default function Dashboard() {
  return <h1>Dashboard</h1>;
}

ما می توانیم یک کامپوننت تنبل برای آن به صورت زیر ایجاد کنیم:

// @/router/loaders.js
import { lazy } from 'react';

// load named export component
export const LazyDashboard = lazy(
  () => import('../pages/Dashboard')
    .then((module) => ({ default: module.Dashboard }))
);

// load default export component
export const LazyDashboard = lazy(
  () => import('../pages/Dashboard')
);

را lazy() تابع تابعی را می گیرد که یک داینامیک برمی گرداند import() عبارتی که مؤلفه مورد نیاز را بارگذاری می کند. را import() بیانیه وعده ای را برمی گرداند که به جزء مورد نیاز حل می شود.

مرحله 3: یک مسیر تنبل تعریف کنید

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

برای مثال، فرض کنید می‌خواهیم بارگذاری تنبلی را انجام دهیم Dashboard هنگامی که کاربر به قسمت هدایت می شود /dashboard URL. می توانیم مسیر تنبل را به صورت زیر تعریف کنیم:

// @/router/index.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import { LazyDashboard } from "./loaders";

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          exact
          path="/dashboard"
          element={<LazyDashboard />}
        />
      </Routes>
    </BrowserRouter>
  )
}

در مثال بالا، ما از exact برای اطمینان از اینکه مسیر فقط زمانی مطابقت دارد که URL دقیقاً مطابقت داشته باشد /dashboard. جزء تنبل را پاس می کنیم LazyDashboard به عنوان تکیه گاه جزء

مرحله 4: برنامه را با Suspense بپیچید

هنگامی که کامپوننت تنبل در حال بارگیری است، React یک کامپوننت بازگشتی را تا زمانی که کامپوننت بارگذاری شود ارائه می‌کند. ما می توانیم یک مؤلفه بارگذاری تعریف کنیم تا یک نشانگر بارگذاری به کاربر نمایش داده شود.

در نهایت، باید کل برنامه را با a بپیچیم Suspense مؤلفه برای اطمینان از اینکه مؤلفه بارگذاری هنگام بارگذاری مؤلفه تنبل نمایش داده می شود.

به عنوان مثال، ما می توانیم بسته بندی کنید App جزء با Suspense جزء به شرح زیر است:

// @/router/index.jsx
import { Suspense } from "react";
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import { LazyDashboard } from "./loaders";

export function App() {
  return (
    <Suspense fallback={<h3>Loading...</h3>}>
      <BrowserRouter>
        <Routes>
          <Route
            exact
            path="/dashboard"
            element={<LazyDashboard />}
          />
        </Routes>
      </BrowserRouter>
    </Suspense>
  )
}

در مثال بالا، ما از Suspense جزء برای بسته بندی BrowserRouter جزء که شامل تمام مسیرهای برنامه است. متن (عنصر) “Loading…” را به عنوان پایه بازگشتی ارسال می کنیم که تا زمانی که کامپوننت تنبل بارگیری شود نمایش داده می شود.

خلاصه

بارگذاری تنبل مسیرها یک تکنیک موثر برای بهبود عملکرد برنامه های React است. React Router DOM پشتیبانی داخلی برای بارگذاری تنبل مسیرها ارائه می دهد که می تواند به راحتی با استفاده از lazy() تابع و Suspense جزء.

با استفاده از بارگذاری تنبل، می توانیم زمان بارگذاری اولیه برنامه را کاهش دهیم و تجربه کاربری را بهبود ببخشیم. با این حال، مهم است که از بارگذاری تنبل با احتیاط استفاده کنید و فقط برای مؤلفه‌های بزرگ‌تری که فوراً مورد نیاز نیستند، استفاده کنید، زیرا بارگذاری تنبل در صورت استفاده بیش از حد می‌تواند تأثیر منفی بر تجربه کاربر داشته باشد.

امیدوارم این مقاله برای شما مفید بوده باشد، چه در حال استفاده از اطلاعات در یک پروژه موجود یا صرفاً برای سرگرمی آن را امتحان کنید. لطفا در صورت مشاهده هر گونه اشتباه در مقاله با ارسال نظر به من اطلاع دهید.