افراز کد بر اساس مسیر و کامپوننت در React — از صفر تا صد

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

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

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

افراز بر مبنای مسیر

یک روش خوب برای شروع، پیاده‌سازی افراز کد مبتنی بر مسیر است. یعنی بسته‌های کد بر اساس مسیر جاری بارگذاری شوند.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

به طور معمول مسیرهای ما مانند زیر هستند:

1import React from 'react';
2import { Route, Switch } from 'react-router-dom';
3import Home from 'pages/Home';
4import Example from 'pages/Example';
5const Routes = () => {
6  return (
7    <Switch>
8      <Route path='/' exact component={Home} />
9      <Route path='/example' component={Example} />
10    </Switch>
11  );
12};
13export default Routes;

اینک کد فوق را طوری بازسازی می‌کنیم که این مسیرها با استفاده از React Loadable به صورت افراز کد مبتنی بر مسیر درآیند. این کتابخانه کوچک یک کامپوننت مرتبه بالا به نام Loadable ارائه می‌کند که یک شیء و دو کلید به نام‌های loader و loading می‌گیرد.

1import React from 'react';
2import { Route, Switch } from 'react-router-dom';
3import Loadable from 'react-loadable';
4const AsyncHome = Loadable({
5  loader: () => import('./pages/Home'),
6  loading: <div>Loading...</div>
7});
8const AsyncExample = Loadable({
9  loader: () =>
10    import('./pages/Example'),
11  loading: <div>Loading...</div>
12});
13const Routes = () => {
14  return (
15    <Switch>
16      <Route path='/' exact component={AsyncHome} />
17      <Route path='/example' component={AsyncExample} />
18    </Switch>
19  );
20};
21export default Routes;

با این تنظیم ساده، کد مرتبط با کامپوننت Example تنها زمانی بارگذاری می‌شود که مسیر فعال باشد. اگر بخش inspector مرورگر را باز کنید و به برگه Network بروید می‌بینید که در صورت تغییر دادن مسیر، کد جدیدی بارگذاری می‌شود.

اگر می‌خواهید یک نام به جای یک هَش تولید شده خودکار یک نام برای بسته کد مورد نظر تعیین کنید تا به وضوح ببینید کدام بخش کد بارگذاری می‌شود می‌توانید از webpackChunkName به صورت زیر استفاده کنید:

1const AsyncExample = Loadable({
2  loader: () =>
3    import(/* webpackChunkName: "Example" */ './pages/Example'),
4  loading: <div>Loading...</div>
5});

گاهی اوقات کامپوننت‌ها واقعاً سریع، یعنی در کمتر از 200 میلی‌ثانیه بارگذاری می‌شود و صفحه بارگذاری فقط یک فلش سریع می‌زند. برخی مطالعات کاربری نشان داده‌اند که این امر موجب می‌شود، کاربر حس کند کارها تر طولانی‌تر از آن چه واقعاً هستند، اجرا می‌شوند. در این وضعیت، اگر هیچ چیزی نمایش ندهید، کاربر حس می‌کند که همه چیز سریع‌تر شده است. خوشبختانه کامپوننت در حال بارگذاری یک prop به نام pastDelay می‌گیرد که تنها زمانی مقدار true دارد که زمان بارگذاری کامپوننت بیشتر از یک تأخیر تعیین شده شود. به صورت پیش‌فرض این مقدار برابر با 200 میلی‌ثانیه است.

به این منظور باید یک کامپوننت Loader ایجاد کنی که در مورد کامپوننت ساده ما به صورت زیر است:

1const AsyncExample = Loadable({
2  loader: () =>
3    import(/* webpackChunkName: "Example" */ './pages/Example'),
4  loading: Loader
5});

کامپوننت Loader نیز به صورت زیر است:

1import React from 'react';
2const Loader = (props) => {
3  if (props.pastDelay) {
4    return <h2>Loading...</h2>
5  } else {
6    return null
7  }
8}
9export default Loader;

در صورتی هم که در زمان بارگذاری کامپوننت با مشکلی مواجه شویم، React Loadable یک prop به نام error ارائه کرده است. این بدان معنی است که کامپوننت Loader نهایی به صورت زیر درمی‌آید:

1import React from 'react';
2const Loader = ({ pastDelay, error }) => {
3  if (error) {
4    return (
5      <h2>Sorry, there was a problem loading the page.</h2>
6    );
7  } else if (pastDelay) {
8    return (
9       <h2>Loading...</h2>
10    );
11  } else {
12    return null;
13  }
14};
15export default Loader;

اکنون می‌توانیم کمی آن را توسعه بدهیم. برای نمونه می‌توانید بخش بعدی کد را درست زمانی که کاربر ماوس را روی لینک مربوطه می‌برد، شروع به بارگذاری کنید. به این منظور باید یک فراخوانی preload() روی کامپوننت Loadable انجام دهید که کد آن به صورت زیر است:

1import React, { useState } from 'react';
2import { Link } from 'react-router-dom';
3import { AsyncExample } from 'routes';
4const SideBar = () => {
5  return (
6    <div className='sidebar'>           
7      <Link to='/' exact={true}>Home</Link>
8      <Link 
9        to='/example' 
10        onMouseOver={() => AsyncExample.preload()}>
11        Example
12      </Link>     
13    </div>
14  );
15};
16export default SideBar;

افراز کد مبتنی بر کامپوننت

حال که با روش افراز کد بر مبنای مسیر جاری آشنا شدیم، در این بخش با روش افراز کد مبتنی بر کامپوننت نیز آشنا خواهیم شد. درون کامپوننت ممکن است بسته به حالت خاص لازم باشد کامپوننت‌های مختلفی رندر شوند. به مثال زیر توجه کنید. در اینجا یک کامپوننت تنها زمانی در نما رندر می‌شود که کاربر روی دکمه کلیک کنید.

1import React, { useState } from 'react';
2import Loadable from 'react-loadable';
3import Loader from 'components/Loader';
4const SomeComponent = Loadable({
5  loader: () => import('components/SomeComponent'),
6  loading: Loading
7});
8const App = () => {
9  const [showComponent, setShowComponent] = useState(false);
10  return (
11    if (showComponent) {
12      return <SomeComponent />;
13    } else {
14      return (
15        <>
16          <h1>Hello, world! ?</h1>
17          <button onClick={() => setShowComponent(true)}>
18            Show component! 
19          </button>
20        </>
21      );
22    }
23  );
24};
25export default App;

بدیهی است که در مورد این کامپوننت ساده، تفاوتی ایجاد نمی‌کند، اما وقتی از کامپوننت‌های بزرگ در یک اپلیکیشن استفاده می‌کنیم، بهتر است افراز کد مبتنی بر کامپوننت را به صورت فوق پیاده‌سازی کنیم.

سخن پایانی

به این ترتیب به پایان این راهنما می‌رسیم. اینک شما آماده پیاده‌سازی افراز کد در اپلیکیشن‌های ری‌اکت خود هستید. به ریپوی React Loadable (+) سر بزنید تا با گزینه‌های دیگری که این کتابخانه عرضه می‌کند آشنا شوید. اگر به دنبال کد آماده خوبی می‌گردید که افراز کد را به صورت آماده اجرا کد بهتر است React Milkshake (+) را امتحان کنید.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش جاوا اسکریپت (JavaScript)
• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• بهینه‌سازی کد‌های جاوا اسکریپت در سال ۲۰۱۸ — راهنمای جامع (بخش اول)
• آموزش جامع Webpack (بخش پنجم: ایمپورت دینامیک و افراز کد) — از صفر تا صد

==