چگونه در یک مرحله زمان بارگذاری برنامه React را افزایش دهیم

چگونه در یک مرحله زمان بارگذاری برنامه React را افزایش دهیم
به این ترتیب Google Docs و YouTube بیش از 500 کیلوبایت بارگذاری منبع را ذخیره می کنند.

Google Docs و YouTube از تکنیک مشابهی برای ذخیره بیش از 500 کیلوبایت بارگیری منابع استفاده می کنند. این تکنیک ساده به سرعت زمان بارگذاری برنامه React شما را بهبود می بخشد.

گاهی اوقات اجزایی در برنامه ما وجود دارد که باید در صفحه پنهان شوند مگر اینکه لازم باشد. یک مثال معمولی بارگذاری تنبل تصاویری است که در ویوپورت نیستند.
𝐇𝐨𝐰 𝐰𝐢𝐥𝐥 𝐭𝐡𝐢𝐬 𝐢𝐦𝐩𝐫

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

این تکنیک ساده است: ما آن دسته از مؤلفه‌هایی را در برنامه خود بارگذاری نمی‌کنیم که هنگام بارگیری برنامه لزوماً مهم نیستند. برنامه آن مؤلفه‌ها را بر اساس نیاز بارگذاری می‌کند، مانند: زمانی که آنها در viewport یا در تعامل با کاربر هستند.

از آنجایی که منابع بر اساس تقاضا بارگیری می شوند، در زمان بارگذاری مورد نیاز برای واکشی آن منابع صرفه جویی می شود. در مواردی که برنامه شما چندین مؤلفه سنگین برای بارگذاری دارد، بسیار مؤثر است.

Google Docs و YouTube از تکنیک مشابهی برای ذخیره بیش از 500 کیلوبایت بارگیری منابع استفاده می کنند.
𝐀 𝐬𝐢𝐦𝐩𝐥𝐞 𝐚𝐩𝐩 𝐭𝐨 𝐥𝐨𝐚𝐝 𝐡𝐞𝐚𝐯𝐲 𝐫𝐞𝐬𝐨𝐮𝐫𝐜𝐞 𝐝𝐞𝐦𝐚𝐧𝐝 𝐝𝐞𝐦𝐚𝐧𝐝 𝐝𝐞𝐦𝐚𝐧𝐝

این یک برنامه چت ساده است که اجزای انتخاب کننده ایموجی های سنگین را در صورت تقاضا بارگیری می کند.

لینک دمو: https://chat-app-eight-ashen.vercel.app

برنامه فوق یک مثال ساده از این مورد استفاده است. وقتی EmojiPicker با کلیک روی دکمه emoji رندر می‌شود، React Lazy تشخیص می‌دهد که آیا مؤلفه EmojiPicker باید روی صفحه قابل مشاهده باشد یا خیر.

راهنمای طراحی لوگو(در تب جدید مرورگر باز می شود )

سپس وارد کردن ماژول کامپوننت را آغاز می کند. هنگام وارد کردن مؤلفه، برنامه بارگیری را نشان می دهد.

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

اگر نیاز به طراحی سایت دارید با ما تماس بگیرید

این تکنیک‌های ساده هنگام ساخت اپلیکیشن‌های سنگین نجات‌بخش هستند. از این تکنیک عاقلانه استفاده کنید زیرا استفاده از آن با هر جزء می تواند منجر به عملکرد ضعیف شود.

مطالب بیشتر در وبلاگ ما برای دریافت خبرنامه هفتگی ما ثبت نام کنید. ما را در توییتر، لینکدین، دنبال کنید.

از MATLAB تا React & Go – بررسی با رکسانا سی.(در تب جدید مرورگر باز می شود )