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

Summarize this content to 400 words in Persian Lang
بارگذاری تنبل و تقسیم کد در React با بارگیری تنها بخش های ضروری برنامه شما به بهینه سازی عملکرد کمک می کند و زمان بارگذاری اولیه را کاهش می دهد. در اینجا نحوه کار آنها آمده است:

1. بارگذاری تنبل

بارگذاری تنبل بارگذاری اجزا را تا زمانی که نیاز باشد به تعویق می اندازد. در React این کار با استفاده از آن انجام می شود React.lazy() و Suspense.

import React, { Suspense } from ‘react’;

const LazyComponent = React.lazy(() => import(‘./LazyComponent’));

function App() {
return (
<div>
<Suspense fallback={<div>Loading…div>}>
<LazyComponent />
Suspense>
div>
);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

React.lazy(): به صورت پویا یک جزء را وارد می کند.

Suspense: در حالی که مؤلفه بارگذاری تنبل در حال واکشی است، یک بک گراند (مثلاً نشانگر بارگیری) ارائه می دهد.

2. تقسیم کد

تقسیم کد، بسته شما را به قطعات کوچک‌تر تقسیم می‌کند و آن‌ها را بر اساس درخواست بارگیری می‌کند. Webpack که توسط سیستم ساخت React استفاده می شود، به طور خودکار نقاط تقسیم را ایجاد می کند.

واردات دینامیک: می توانید از پویا استفاده کنید import() برای بارگذاری ماژول ها فقط در صورت نیاز. به عنوان مثال:

import(“./module”).then(module => {
// Use the dynamically loaded module
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

React Router و Code Splitting: هنگام استفاده از روتر React، برای عملکرد بهتر، اجزای مسیر را بارگذاری کنید.

import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;
import React, { Suspense } from ‘react’;

const Home = React.lazy(() => import(‘./Home’));
const About = React.lazy(() => import(‘./About’));

function App() {
return (
<Router>
<Suspense fallback={<div>Loading…div>}>
<Switch>
<Route path=”https://dev.to/about” component={About} />
<Route path=”https://dev.to/” component={Home} />
Switch>
Suspense>
Router>
);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مزایا:

بهبود زمان بارگذاری: فقط کد لازم در صورت نیاز بارگذاری می شود.

عملکرد بهینه شده: تقسیم کد تضمین می کند که کاربران فقط قسمت هایی از برنامه را دانلود کنند که با آنها تعامل دارند.

آیا می خواهید یک مثال عملی داشته باشید یا به اجرای آن در پروژه خود کمک کنید؟

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...div>}>
        <LazyComponent />
      Suspense>
    div>
  );
}

export default App;

import("./module").then(module => {
  // Use the dynamically loaded module
});

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense } from 'react';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...div>}>
        <Switch>
          <Route path="https://dev.to/about" component={About} />
          <Route path="https://dev.to/" component={Home} />
        Switch>
      Suspense>
    Router>
  );
}

export default App;