تقسیم کد با React.lazy و Suspense

Summarize this content to 400 words in Persian Lang
در توسعه وب مدرن، عملکرد بسیار مهم است. کاربران انتظار بارگذاری سریع برنامه ها را دارند و یکی از موثرترین استراتژی ها برای دستیابی به این هدف، تقسیم کد است. تقسیم کد به شما این امکان را می دهد که برنامه خود را به تکه های کوچکتر تقسیم کنید و در صورت نیاز فقط کدهای لازم را بارگیری کنید. این مقاله به بررسی نحوه پیاده‌سازی تقسیم کد در React با استفاده از آن می‌پردازد React.lazy و Suspense.

آشنایی با تقسیم کد

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

نقش بسته بندی

اکثر برنامه های React از باندلرهایی مانند Webpack، Rollup یا Browserify برای ترکیب فایل ها در یک بسته استفاده می کنند. در حالی که بسته‌بندی کارآمد است، می‌تواند به اندازه فایل‌های بزرگ با رشد برنامه شما منجر شود. تقسیم کد به کاهش این مشکل کمک می کند و به شما امکان می دهد فقط بخش های ضروری برنامه خود را بارگیری کنید.

واردات دینامیک

نحو دینامیک import() پایه و اساس تقسیم کد در جاوا اسکریپت است. این به شما امکان می دهد ماژول ها را به صورت ناهمزمان بارگیری کنید، که برای پیاده سازی تقسیم کد در React بسیار مهم است.

// Before code splitting
import { add } from ‘./math’;

console.log(add(16, 26));

// After code splitting
import(“./math”).then(math => {
console.log(math.add(16, 26));
});

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

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

هنگام استفاده import()، باندلر به طور خودکار تکه های جداگانه ای برای ماژول های وارد شده ایجاد می کند.

با استفاده از React.lazy

React یک روش داخلی برای پیاده سازی تقسیم کد در سطح کامپوننت فراهم می کند React.lazy. این تابع به شما امکان می دهد کامپوننتی را تعریف کنید که به صورت پویا بارگذاری شود.

مثال:

import React, { lazy } from ‘react’;

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

const DetailsComponent = () => (
<div>
<AvatarComponent />
</div>
);

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

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

در این مثال، AvatarComponent فقط زمانی بارگذاری می شود DetailsComponent رندر می شود و زمان بارگذاری اولیه را کاهش می دهد.

معرفی تعلیق

در حالی که React.lazy بارگذاری اجزا را مدیریت می کند، وضعیت بارگذاری را مدیریت نمی کند. اینجاست که Suspense وارد می شود Suspense به شما این امکان را می دهد که یک رابط کاربری بازگشتی تعریف کنید که در حین واکشی مؤلفه بارگذاری شده تنبل نمایش داده شود.

مثال:

import React, { lazy, Suspense } from ‘react’;

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

const renderLoader = () => <p>Loading…</p>;

const DetailsComponent = () => (
<Suspense fallback={renderLoader()}>
<AvatarComponent />
</Suspense>
);

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

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

در این مثال، در حالی که AvatarComponent در حال بارگذاری است، کاربر پیام “بارگیری…” را می بیند. این امر با ارائه بازخورد در طول فرآیند بارگیری، تجربه کاربر را افزایش می دهد.

مدیریت چند مولفه

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

مثال:

import React, { lazy, Suspense } from ‘react’;

const AvatarComponent = lazy(() => import(‘./AvatarComponent’));
const InfoComponent = lazy(() => import(‘./InfoComponent’));

const renderLoader = () => <p>Loading…</p>;

const DetailsComponent = () => (
<Suspense fallback={renderLoader()}>
<AvatarComponent />
<InfoComponent />
</Suspense>
);

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

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

در این صورت هر دو کامپوننت با هم بارگذاری می شوند و کاربر تا زمانی که هر دو آماده شوند، یک نشانگر بارگذاری واحد را مشاهده می کند.

مرزهای خطا

هنگام برخورد با اجزای بارگذاری تنبل، رسیدگی به خرابی‌های بارگذاری احتمالی ضروری است. React الگویی برای این کار از طریق مرزهای خطا ارائه می دهد. یک مرز خطا می تواند خطاها را در حین رندر پیدا کند و یک رابط کاربری بازگشتی را نمایش دهد.

مثال:

import React, { lazy, Suspense } from ‘react’;

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

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError(error) {
return { hasError: true };
}

render() {
if (this.state.hasError) {
return <p>Loading failed! Please reload.</p>;
}
return this.props.children;
}
}

const DetailsComponent = () => (
<ErrorBoundary>
<Suspense fallback={<p>Loading…</p>}>
<AvatarComponent />
</Suspense>
</ErrorBoundary>
);

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

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

در این مثال، اگر AvatarComponent بارگذاری نشود، کاربر یک پیام خطای دوستانه را به جای یک رابط کاربری خراب مشاهده خواهد کرد.

تقسیم کد مبتنی بر مسیر

یکی از موثرترین مکان ها برای پیاده سازی تقسیم کد در سطح مسیر است. این به ویژه در برنامه های تک صفحه ای (SPA) که مسیرهای مختلف می توانند اجزای مختلف را بارگیری کنند مفید است.

مثال:

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

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

const App = () => (
<Router>
<Suspense fallback={<div>Loading…</div>}>
<Routes>
<Route path=”/” element={<Home />} />
<Route path=”/about” element={<About />} />
</Routes>
</Suspense>
</Router>
);

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

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

در این مثال، Home و About اجزا فقط زمانی بارگذاری می شوند که به مسیرهای مربوطه آنها دسترسی داشته باشید و زمان بارگذاری اولیه را بهینه می کند.

نتیجه گیری

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

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

برای اطلاعات بیشتر در مورد React، TypeScript و شیوه‌های توسعه وب مدرن، من را دنبال کنید!👨‍💻

// Before code splitting
import { add } from './math';

console.log(add(16, 26));

// After code splitting
import("./math").then(math => {
  console.log(math.add(16, 26));
});

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
);

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading...</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
);

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));

const renderLoader = () => <p>Loading...</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
    <InfoComponent />
  </Suspense>
);

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <p>Loading failed! Please reload.</p>;
    }
    return this.props.children;
  }
}

const DetailsComponent = () => (
  <ErrorBoundary>
    <Suspense fallback={<p>Loading...</p>}>
      <AvatarComponent />
    </Suspense>
  </ErrorBoundary>
);

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

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

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);