تأخیر پنهان ۳۰۰ میلی‌ثانیه‌ای در React.lazy و نحوه رفع آن — React.lazy, Suspense and the Hidden 300 ms Delay
خلاصه
این مقاله بررسی می‌کند که چگونه مکانیسم داخلی React.lazy و مکث ۳۰۰ میلی‌ثانیه‌ای Suspense برای جلوگیری از پرش صفحه، ناخواسته باعث تأخیر در رندر اولیه ابزارک‌ها می‌شود. نویسنده نشان می‌دهد که با دور زدن مکث اجباری و بارگذاری دستی کدها می‌توان به بهبود چشمگیر سرعت رندر رسید.
زمینه و مسئله اصلی
توسعه‌دهندگان یک افزونه مرورگر مبتنی بر React 19 که از ابزارک‌های مختلفی (مثل ساعت، تقویم و اسپاتیفای) تشکیل شده و با ابزار Rspack ساخته شده است، با یک مشکل عجیب روبه‌رو شدند. با وجود اینکه فایل‌های جاوااسکریپت بسیار سریع و در حدود ۱۰۰ میلی‌ثانیه بارگذاری و اجرا می‌شدند، ابزارک‌ها با تأخیری قابل‌توجه و در حدود ۳۸۰ میلی‌ثانیه روی صفحه ظاهر می‌شدند. بررسی‌ها نشان داد که حجم بالای فایل‌ها دلیل این اتفاق نیست، بلکه رفتار خود ری‌اکت مقصر است.
چرا ری‌اکت ابزارک‌ها را نگه می‌دارد؟
این تأخیر ناشی از ترکیب دو رفتار داخلی در React است:
- هر کامپوننت تنبل یا همان
React.lazyدر اولین رندر خود به اجبار وارد حالت تعلیق (Suspense) می‌شود، حتی اگر کد آن از قبل بارگذاری شده باشد. - ری‌اکت برای جلوگیری از پرش‌های مکرر صفحه (
Flicker)، وقتی محتوای معلق آماده می‌شود، نمایش آن را تا ۳۰۰ میلی‌ثانیه از آخرین رندر فال‌بک (FALLBACK_THROTTLE_MS) معلق نگه می‌دارد تا همه‌چیز یکجا و دسته‌جمعی رندر شود.
ترکیب این دو ویژگی باعث می‌شود که هر ابزارک در بدو ورود حداقل ۳۰۰ میلی‌ثانیه معطل بماند، مهم نیست کد آن چقدر سریع از دیسک یا شبکه رسیده باشد.
راه‌حل‌های بررسی‌شده و راه‌حل نهایی
تیم توسعه ابتدا تلاش کرد با دسترسی به فیلدهای خصوصی مثل _init و _payload در ری‌اکت، پیش‌بارگذاری (Preload) را انجام دهد. این کار زمان نمایش را به حدود ۹۵ میلی‌ثانیه رساند، اما همچنان در دستگاه‌های کندتر نقطه ضعف داشت.
راه‌حل نهایی و پایدار این بود که اصلاً اجازه ندهیم کامپوننت معلق بماند (Suspend). به جای استفاده صرف از Suspense برای کدهای خود کامپوننت، آن‌ها هوکی به نام useLazyReady نوشتند که وضعیت بارگذاری را بررسی می‌کند:
- اگر کد بارگذاری نشده باشد، ابزارک پلیس‌هولدر (Placeholder) معمولی را به عنوان محتوای عادی رندر می‌کند.
- همزمان بارگذاری کد را در پس‌زمینه شروع می‌کند.
- به محض دریافت کد، با یک
useReducerساده کامپوننت واقعی را جایگزین می‌کند.
چون در این روش هیچ تعلیقی (Suspense) اتفاق نمی‌افتد، محدودیت و تأخیر ۳۰۰ میلی‌ثانیه‌ای ری‌اکت دور زده می‌شود و هر ابزارک به محض آماده شدن کدهایش روی صفحه نقش می‌بندد.
دیدگاه جامعه هکرنیوز
در بحث‌های هکرنیوز، برخی کاربران به این نکته اشاره کردند که این یک مشکل کاملاً خاص در اکوسیستم ری‌اکت است و برخی دیگر نیز لحن نگارش مقاله را به استفاده از ابزارهای هوش مصنوعی نسبت دادند. با این حال، بسیاری از مهندسان این تحلیل عمیق روی کدهای داخلی ری‌اکت را بسیار ارزشمند دانستند.
این مطلب به‌صورت کاملاً خودکار و با هوش مصنوعی از مقالهٔ اصلی و بحث هکرنیوز تهیه شده و ممکن است خطا داشته باشد. حقوق مطلب اصلی متعلق به نویسندهٔ آن است. قوانین و گزارش مشکل