Table of Contents
درک Lazy load در React Native
React Native به یک چارچوب برای توسعه تلفن همراه متقابل پلتفرم تبدیل شده است، به توسعه دهندگان اجازه می دهد تا برنامه های سطح بومی را با جاوا اسکریپت و React بسازند، همانطور که مقیاس برنامه ها، تنگناهای عملکردی اغلب ظهور می کنند - به ویژه در طول بار اولیه، یکی از موثرترین استراتژی ها برای کاهش این مسائل، استفاده از بارگذاری پیشرفته حافظه و بارگذاری فایل های راهنمای کاربر است.
Lazyload چیست؟
بارگذاری Lazy یک الگوی طراحی است که اولیه سازی یک شی، جزء یا منبع را تا زمانی که نقطه مورد نیاز است به تعویق می اندازد.در زمینه React Native، این بدان معنی است که صفحه نمایش یا جزء بارگیری و رندر نمی شود تا کاربر به آن حرکت کند یا دید آن قریب الوقوع شود: اهداف اصلی عبارتند از:
- رندر اولیه - برنامه با تنها اجزای ضروری راه اندازی می شود، بنابراین کاربر زودتر محتوا را می بیند.
- [در این باره] استفاده از حافظه کم ([FLT: 1] - اجزای غیر قابل استفاده در حافظه نگهداری نمی شوند.
- واکنش پذیری بهبود یافته - موضوع اصلی توسط واردات سنگین در طول راه اندازی مسدود نمی شود.
در React Native، بارگذاری تنبل به طور معمول از طریق واردات پویا با استفاده از و یا از طریق راه حل های خاص کتابخانه مانند React Navigation برای بارگذاری صفحه نمایش] اجرا می شود.
مزایای Lazy در React Native
پذیرش بارگذاری تنبل یک طیف گسترده ای از بهبود عملکرد را به دست می آورد:
- اندازه بسته اولیه (FLT:1) را کاهش داد - تقسیم کد اجازه می دهد تا بسته جاوا اسکریپت به قطعات کوچکتر بارگذاری شده در تقاضا شکسته شود، این بسیار مهم است زیرا برنامه های React Native یک بسته جاوا اسکریپت را که باید در راه اندازی تجزیه و اجرا شود.
- ] زمان برای تعاملی (TTI) - برنامه زودتر قابل استفاده می شود زیرا محاسبات سنگین و واردات بزرگ کتابخانه کاهش می یابد.
- بهتر عمر باتری - منابع Idle بارگیری نمی شوند، کاهش استفاده از CPU و باتری حفظ.
- نگهداری از - بارگذاری برش کد مدولار را تشویق می کند، و باعث می شود که کد پایه آسان تر برای حرکت و آزمایش باشد.
در حالی که این مزایا جهانی هستند، بارگذاری تنبل به ویژه برای برنامه هایی با صفحه نمایش های متعدد، نمودار های پیچیده، رسانه های غنی یا SDK های شخص ثالث ارزشمند است.
اجرای Lazy Load با React.lazy و Suspense
React Native از پشتیبانی می کند و از نسخه 0.62، تفاوت هایی در مقایسه با React برای وب وجود دارد.
راه اندازی Basic
اول، اطمینان حاصل کنید که از نسخه سازگار React Native (=.62) استفاده می کنید و بسته بندی شما (Metro) برای پشتیبانی از واردات پویا پیکربندی شده است. Metro از واردات داخلی از 0.59 پشتیبانی می کند.
مرحله 1 - Lazy Load a Component
برای مثال یک جزء سنگین ایجاد کنید، یک نمودار پیچیده یا یک لیست بزرگ، و آن را با استفاده از وارد کنید.
[[ویرایش]
مرحله ۲ – بسته بندی با Suspense
یک UI کشویی را در حالی که جزء بارگذاری می شود، ارائه دهید:
[[ویرایش]
غار مهم برای React Native
در وب، به طور یکپارچه با React.lazy کار می کند. در دسترس است، اما همه انواع اجزای جزء به طور کامل در آن کار نمی کنند - به ویژه اجزای کلاس میراث و یا اجزای که به برای عوارض جانبی تکیه می کنند، همیشه اجزای تنبل خود را بر دستگاه های واقعی تست کنید.
تکنیک های پیشرفته Lazy Load
دانلود بازی Screen-Level Lazy با React Navigation
رایج ترین مورد استفاده برای بارگذاری تنبل در برنامه های تلفن همراه بارگذاری صفحه نمایش منحرف شده است. React Navigation، کتابخانه ناوبری de facto، از این الگو از طریق جعبه پشتیبانی می کند (FLT:10) و پویا (FLT 11).
مثالی با React Navigation 6:
[در این میان]
شما می توانید با استفاده از prefetching بهینه سازی کنید: هنگامی که کاربر بر روی یک برگه حرکت می کند یا به صفحه نمایش می رود، می توانید صفحه بعدی را با استفاده از [FLT13] یا دستی (FLT:14 تماس بگیرید.
تصاویر دانلود Lazy Load
تصاویر اغلب سنگین ترین دارایی ها در یک برنامه موبایل هستند (عکس های بارگذاری شده) به معنی حذف آنها تا زمانی که نزدیک به پورت هستند، می توانید با استفاده از کتابخانه هایی مانند تصاویر سریع و سریع [FLT1] یا expo] ، که هر دو از الگوهای استفاده از جعبه سفارشی (Fching) استفاده می کنند.
مثالی با BedList برای ردیف های قابل مشاهده بار تنبل فقط:
[در برابر ]
این رویکرد تضمین می کند که تنها اقلام موجود در پنجره قابل مشاهده ارائه شده اند، در حالی که موارد دیگر مجازی شده اند.
کد تقسیم شده با React.lazy و React Navigation Screens
برای برنامه های بزرگ، شما همچنین می توانید بسته جاوا اسکریپت را با استفاده از React.lazy در ترکیب با React Navigation (FLT 20) تقسیم کنید. [۳] تابع از React Navigation v5.با این حال، توجه داشته باشید که React Navigation v6 مستقیما از اجزای آن استفاده می کند، بنابراین شما می توانید آن را با تنبلی همانطور که در بالا نشان داده شده است، بسته بندی کنید.
بهترین تمرین برای Lazy در React Native
- من آنچه را که باید بارگذاری کند [FLT 1] - برنامه خود را برای پیدا کردن سنگین ترین اجزای، به طور معمول این نمودارها، نقشه ها، بازیکنان ویدئویی، اشکال پیچیده، و صفحه نمایش کاربر به ندرت بازدید می کنند.
- تخفیف های معنی دار [FLT 1] را ارائه دهید - از صفحه نمایش اسکلت، اثرات شلمر یا شاخص های فعالیت استفاده کنید تا کاربر بداند که چیزی در حال وقوع است.
- (به جز این که در این زمینه به صورت زیر به صورت زیر به صورت زیر به کار می رود، در این صورت به صورت زیر به صورت زیر به صورت زیر به صورت زیر به صورت زیر به صورت زیر به آن اشاره کنید.
- بارگذاری تنبل اجزای ناچیز [FLT 1] - سربار واردات پویا و Suspense می تواند از مزایای بسیار کوچک (به عنوان مثال، یک واحد [FLT 22] بیشتر باشد.
- تست در دستگاه های کم پایان [FLT 1] - دستاوردهای عملکردی در دستگاه های با رم محدود و CPU های کندتر قابل توجه است.
- استفاده از خط مترو نیاز به [FLT 1] - برای پروژه های قدیمی تر که نمی توانند از واردات پویا استفاده کنند، مترو از در پیکربندی مترو برای هدر دادن بارگیری ماژول پشتیبانی می کند.
قرص های معمول و چگونگی اجتناب از آن
دانلود بازی Over-Lazy Load
بارگذاری تنبلی هر جزء می تواند منجر به یک تجربه کاربر پرشی با بسیاری از اسپینر بارگذاری شود.بر روی صفحه نمایش و اجزای گران قیمت تمرکز کنید.
۲- بارگذاری تنبلی در طول انتقال
اگر شما یک صفحه را بارگذاری کنید که کاربر از طریق یک پشته یا انتقال زبانه حرکت می کند، حالت بارگذاری می تواند باعث تاخیر در هنگام نصب صفحه نمایش قبلی یا زمانی که کاربر بر روی یک دکمه شناور است، شود.
۳- عدم کنترل خطا
واردات پویا می تواند به دلیل مسائل شبکه یا فساد بسته شکست بخورد. برای گرفتن خطا در Suspenseback:
[FLT 26 ]
۴ رفتار احتمالی در سراسر پلتفرم
iOS و Android ممکن است به طور متفاوتی تست کنند.همیشه در هر دو سیستم عامل آزمایش کنید.
اندازه گیری عملکرد و نظارت
قبل از بارگذاری تنبل، معیارهای پایه را با استفاده از ابزارهایی مانند React Native Performance Monitor (در منوی توسعه دهنده موجود است)، Flipper یا React DevTools ردیابی:
- زمان تحویل اولیه (TTIR)
- زمان برای تعاملی (TTI)
- استفاده از حافظه قبل و بعد از بارگذاری تنبل
- اندازه ی آهنگ در هر تکه
پس از پیاده سازی، اندازه گیری مجدد برای ارزیابی بهبود ها.در بسیاری از برنامه های React Native در دنیای واقعی (به عنوان مثال، برنامه Shopify )، بارگذاری تنبل زمان استارت آپ را بیش از 40٪ کاهش داد.
منابع خارجی و خواندن بیشتر
- اصلاح دستورالعمل های رسمی بومی ( Optimizing JavaScript Loading
- [[ویرایش] [۱] [۱] [۱۰] [۱] [۱] [۱] [۱] [۱] [۱]
- وبلاگ Callstack – کد تقسیم شده در React Native
نتیجه گیری
بارگذاری تنبلی یک گلوله نقره نیست، اما هنگامی که به درستی اعمال می شود، یکی از قوی ترین ابزار در یک ابزار عملکرد توسعه دهنده بومی است. با تجزیه بارگذاری قطعات غیر ضروری، تصاویر و صفحه نمایش ها، شما می توانید به طور چشمگیری کاهش زمان بارگذاری اولیه، کاهش فشار حافظه، و ارائه یک تجربه ابریشم-مووت برای کاربران خود را با استفاده از نوار دقیق تر - و بارگذاری صفحات نمایش های ساده تر، و یا بارگذاری دقیق تر، به ندرت بارگذاری قطعات دیگر از صفحه نمایش های نرم افزار، کاهش می دهد.