فرادرسافراز کد بر اساس مسیر و کامپوننت در React – از صفر تا صد
زمانی که حجم باندل اپلیکیشن React شما شروع به افزایش می‌کند، سرعت آن کاهش می‌یابد. به همین جهت است که در توسعه وب مدرن به وفور با بحث افراز کد مواجه می‌شویم. افراز کد به فرایند اخذ یک باندل بزرگ شامل کل اپلیکیشن و سپس تقسیم آن به چند باندل کوچک‌تر که شامل بخش‌های مختلف اپلیکیشن هستند گفته می‌شود. این تکنیک امکان بارگذاری بخش‌های مختلف کد را صرفاً در موارد نیاز فراهم می‌سازد. در این مقاله با روش افراز کد بر اساس مسیر و کامپوننت در React آشنا خواهیم شد.
برای نمونه، زمانی که یک بازدیدکننده وارد صفحه اصلی اپلیکیشن شما می‌شود، نیازی به بارگذاری همه کدهای مرتبط با بخش‌های مختلف وجود ندارد. کاربر ممکن است اصلاً به آن مسیرها نرود، بنابراین تنها باید زمانی آن‌ها را بارگذاری کنیم که کاربر به آن صفحه حرکت کند. در صورتی که تنها لازم باشد کد مرتبط به صفحه اصلی را بارگذاری کنیم، منجر به کاهش زمان بارگذاری اولیه و لود شدن سریع‌تر به خصوص در روی شبکه‌های کند می‌شود.
در ادامه به بررسی شیوه افزایش عملکرد اپلیکیشن‌های ری‌اکت از طریق پیاده‌سازی افراز کد با استفاده از React Loadable می‌پردازیم. اگر می‌خواهید در زمان صرفه‌جویی کنید و از کدهای آماده بهره بگیرید که شامل افراز کد هستند، می‌توانید از React Milkshake استفاده کنید.
افراز بر مبنای مسیر
یک روش خوب برای شروع، پیاده‌سازی افراز کد مبتنی بر مسیر است. یعنی بسته‌های کد بر اساس مسیر جاری بارگذاری شوند.
به طور معمول مسیرهای ما مانند زیر هستند:
اینک کد فوق را طوری بازسازی می‌کنیم که این مسیرها با استفاده از React Loadable به صورت افراز کد مبتنی بر مسیر درآیند. این کتابخانه کوچک یک کامپوننت مرتبه بالا به نام Loadable ارائه می‌کند که یک شیء و دو کلید به نام‌های loader و loading می‌گیرد.
با این تنظیم ساده، کد مرتبط با کامپوننت Example تنها زمانی بارگذاری می‌شود که مسیر فعال باشد. اگر بخش inspector مرورگر را باز کنید و به برگه Network بروید می‌بینید که در صورت تغییر دادن مسیر، کد جدیدی بارگذاری می‌شود.
اگر می‌خواهید یک نام به جای یک هَش تولید شده خودکار یک نام برای بسته کد مورد نظر تعیین کنید تا به وضوح ببینید کدام بخش کد بارگذاری می‌شود می‌توانید از webpackChunkName به صورت زیر استفاده کنید:
گاهی اوقات کامپوننت‌ها واقعاً سریع، یعنی در کمتر از 200 میلی‌ثانیه بارگذاری می‌شود و صفحه بارگذاری فقط یک فلش سریع می‌زند. برخی مطالعات کاربری نشان داده‌اند که این امر موجب می‌شود، کاربر حس کند کارها تر طولانی‌تر از آن چه واقعاً هستند، اجرا می‌شوند. در این وضعیت، اگر هیچ چیزی نمایش ندهید، کاربر حس می‌کند که همه چیز سریع‌تر شده است. خوشبختانه کامپوننت در حال بارگذاری یک prop به نام pastDelay می‌گیرد که تنها زمانی مقدار true دارد که زمان بارگذاری کامپوننت بیشتر از یک تأخیر تعیین شده شود. به صورت پیش‌فرض این مقدار برابر با 200 میلی‌ثانیه است.
به این منظور باید یک کامپوننت Loader ایجاد کنی که در مورد کامپوننت ساده ما به صورت زیر است:
کامپوننت Loader نیز به صورت زیر است:
در صورتی هم که در زمان بارگذاری کامپوننت با مشکلی مواجه شویم، React Loadable یک prop به نام error ارائه کرده است. این بدان معنی است که کامپوننت Loader نهایی به صورت زیر درمی‌آید:
اکنون می‌توانیم کمی آن را توسعه بدهیم. برای نمونه می‌توانید بخش بعدی کد را درست زمانی که کاربر ماوس را روی لینک مربوطه می‌برد، شروع به بارگذاری کنید. به این منظور باید یک فراخوانی preload() روی کامپوننت Loadable انجام دهید که کد آن به صورت زیر است:
افراز کد مبتنی بر کامپوننت
حال که با روش افراز کد بر مبنای مسیر جاری آشنا شدیم، در این بخش با روش افراز کد مبتنی بر کامپوننت نیز آشنا خواهیم شد. درون کامپوننت ممکن است بسته به حالت خاص لازم باشد کامپوننت‌های مختلفی رندر شوند. به مثال زیر توجه کنید. در اینجا یک کامپوننت تنها زمانی در نما رندر می‌شود که کاربر روی دکمه کلیک کنید.
بدیهی است که در مورد این کامپوننت ساده، تفاوتی ایجاد نمی‌کند، اما وقتی از کامپوننت‌های بزرگ در یک اپلیکیشن استفاده می‌کنیم، بهتر است افراز کد مبتنی بر کامپوننت را به صورت فوق پیاده‌سازی کنیم.
سخن پایانی
به این ترتیب به پایان این راهنما می‌رسیم. اینک شما آماده پیاده‌سازی افراز کد در اپلیکیشن‌های ری‌اکت خود هستید. به ریپوی React Loadable (+) سر بزنید تا با گزینه‌های دیگری که این کتابخانه عرضه می‌کند آشنا شوید. اگر به دنبال کد آماده خوبی می‌گردید که افراز کد را به صورت آماده اجرا کد بهتر است React Milkshake (+) را امتحان کنید.
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزشهای برنامهنویسی
- آموزش جاوا اسکریپت (JavaScript)
- مجموعه آموزشهای JavaScript (جاوا اسکریپت)
- بهینه‌سازی کدهای جاوا اسکریپت در سال ۲۰۱۸ — راهنمای جامع (بخش اول)
- آموزش جامع Webpack (بخش پنجم: ایمپورت دینامیک و افراز کد) — از صفر تا صد
==
