Table of Contents

React Native में आलसी लोड हो रहा है

React Native क्रॉस-प्लेटफॉर्म मोबाइल डेवलपमेंट के लिए एक गो-टू फ्रेमवर्क बन गया है, जिससे डेवलपर्स को जावास्क्रिप्ट और रिएक्ट के साथ मूल स्तर के ऐप बनाने की अनुमति मिलती है। अनुप्रयोगों के पैमाने के रूप में, प्रदर्शन की बोतल नेक अक्सर उभरते हैं - विशेष रूप से प्रारंभिक लोड के दौरान। इन मुद्दों को कम करने के लिए सबसे प्रभावी रणनीतियों में से एक है आलसी लोड हो रहा है । यह तकनीक घटकों, स्क्रीन और परिसंपत्तियों को लोड करने की अनुमति देती है जब तक कि उन्हें वास्तव में जरूरत नहीं होती है, ऐप के स्टार्टअप समय और मेमोरी पदचिह्न को कम करती है। इस विस्तारित गाइड में, हम प्रतिक्रियात्मक नेटिव में आलसी लोडिंग को लागू करने में गहरी गोता है, जो कि उन्नत छवि हैंडलिंग और नेविगेशन के साथ सब कुछ भी शामिल है।

क्या है आलसी लोड हो रहा है?

आलसी लोडिंग एक डिज़ाइन पैटर्न है जो किसी वस्तु, घटक या संसाधन के आरंभीकरण को स्थगित करता है जब तक कि उस बिंदु पर इसकी आवश्यकता नहीं होती है। प्रतिक्रिया मूल के संदर्भ में, इसका मतलब यह है कि एक स्क्रीन या घटक लोड नहीं होता है और जब तक उपयोगकर्ता इसे नेविगेट नहीं करता है या इसकी दृश्यता असंभव हो जाती है तब तक प्रस्तुत नहीं किया जाता है। प्राथमिक लक्ष्य हैं:

  • ]Faster प्रारंभिक render[ – ऐप केवल आवश्यक घटकों के साथ शुरू होता है, इसलिए उपयोगकर्ता जल्द ही सामग्री को देखता है।
  • ]]निम्नतम स्मृति उपयोग – अप्रयुक्त घटक स्मृति में नहीं रखा गया है।
  • ]Improved responsiveness – मुख्य धागा स्टार्टअप के दौरान भारी आयात द्वारा अवरुद्ध नहीं है।

React Native में, lazy लोडिंग को आम तौर पर ] और का उपयोग करके गतिशील आयात के माध्यम से कार्यान्वित किया जाता है, या पुस्तकालय-विशिष्ट समाधानों जैसे ]React नेविगेशन स्क्रीन-स्तरीय आलसी लोडिंग के लिए।

React Native में आलसी लोड हो रहा है के लाभ

आलसी लोडिंग को अपनाने से प्रदर्शन में सुधार की एक विस्तृत श्रृंखला उत्पन्न होती है:

  1. ]Reduced प्रारंभिक बंडल आकार - कोड विभाजन जावास्क्रिप्ट बंडल को मांग पर लोड किए गए छोटे टुकड़ों में टूट जाने की अनुमति देता है। यह महत्वपूर्ण है क्योंकि रीएक्ट नेटिव ऐप एक जावास्क्रिप्ट बंडल को जहाज करता है जिसे लॉन्च पर पार्स्ड और निष्पादित किया जाना चाहिए।
  2. ]Faster time to इंटरैक्टिव (TTI) – यह ऐप पहले प्रयोग योग्य हो जाता है क्योंकि भारी गणना और बड़े पुस्तकालय आयात को स्थगित कर दिया जाता है।
  3. बेटर बैटरी लाइफ - आइडल संसाधन लोड नहीं होते हैं, सीपीयू उपयोग को कम करते हैं और बैटरी को संरक्षित करते हैं।
  4. Easier Maintenance – आलसी लोडिंग मॉड्यूलर कोड को प्रोत्साहित करती है, जिससे कोडबेस को नेविगेट करने और परीक्षण में आसान बना दिया जाता है।

हालांकि ये लाभ सार्वभौमिक हैं, आलसी लोडिंग कई स्क्रीन, जटिल चार्ट, अमीर मीडिया या तीसरे पक्ष के SDKs वाले ऐप्स के लिए विशेष रूप से मूल्यवान है।

React.lazy और Suspense के साथ आलसी लोड हो रहा है को लागू करना

React Native समर्थन और संस्करण 0.62 के बाद से। हालांकि, वहाँ वेब के लिए प्रतिक्रिया की तुलना में nuances हैं। चलो एक ठोस कार्यान्वयन के माध्यम से चलना।

बेसिक सेटअप

सबसे पहले, सुनिश्चित करें कि आप एक संगत रीएक्ट नेटिव संस्करण (> = 0.62) का उपयोग कर रहे हैं और यह कि आपके बंडलर (Metro) को गतिशील आयात का समर्थन करने के लिए कॉन्फ़िगर किया गया है। मेट्रो संस्करण 0.59 के बाद से गतिशील आयात आउट-ऑफ-द-बॉक्स का समर्थन करता है।

चरण 1 - आलसी एक घटक लोड

उदाहरण के लिए, एक जटिल चार्ट या एक बड़ी सूची बनाएं और इसे का उपयोग करके आयात करें:

]]]

चरण 2 - Suspense के साथ लपेटें

एक गिरावट यूआई प्रदान करते हैं जबकि घटक लोड हो रहा है:

]]

React Native के लिए महत्वपूर्ण Caveat

वेब पर, ] React.lazy के साथ सहज रूप से काम करता है। React Native में, उपलब्ध है लेकिन सभी घटक प्रकार पूरी तरह से इसके भीतर काम नहीं करते हैं - विशेष रूप से लीगेसी क्लास घटक या घटक जो साइड इफेक्ट के लिए पर निर्भर करते हैं। हमेशा वास्तविक उपकरणों पर अपने आलसी लोड घटकों का परीक्षण करें। हुक का उपयोग करके अधिकांश कार्यात्मक घटकों के लिए, यह ठीक काम करता है।

उन्नत आलसी लोडिंग तकनीक

स्क्रीन-स्तर आलसी React नेविगेशन के साथ लोड हो रहा है

मोबाइल एप्लिकेशन में आलसी लोडिंग के लिए सबसे आम उपयोग का मामला स्क्रीन लोड करने की deferred है। रिएक्ट नेविगेशन, डी फैक्टो नेविगेशन लाइब्रेरी, इस पैटर्न को अपने ] prop और डायनामिक के माध्यम से बॉक्स से बाहर का समर्थन करता है।

React नेविगेशन 6 के साथ उदाहरण:

]]

आप आगे ]prefetching का उपयोग करके अनुकूलन कर सकते हैं: जब एक उपयोगकर्ता एक टैब पर होवर्स करता है या स्क्रीन पर नेविगेट करता है, तो आप आगे की स्क्रीन को [[FLT: 13]] या मैनुअल [[FLT: 14]]]] कॉल का उपयोग करके आगे की स्क्रीन को लोड करना शुरू कर सकते हैं।

आलसी लोडिंग इमेज

छवियाँ अक्सर एक मोबाइल ऐप में सबसे भारी परिसंपत्तियां हैं। आलसी लोडिंग छवियों का मतलब है कि जब तक वे व्यूपोर्ट के पास नहीं हैं तब तक उनके डाउनलोड को स्थगित कर दिया जाता है। आप इस तरह के पुस्तकालयों का उपयोग कर प्राप्त कर सकते हैं react-native-fast-image] या ]xpo-image]], जिनमें से दोनों आलसी लोडिंग और बॉक्स से बाहर कैशिंग का समर्थन करते हैं। एक कस्टम समाधान के लिए, के माध्यम से पैटर्न ] या ]]]]] के माध्यम से ]]]]]]]]]]]]]]]]]]] के माध्यम से [[[[[FLT[FLT[FLT:]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]] के माध्यम से [[[[[[[

उदाहरण के लिए FlatList के साथ ही आलसी लोड दृश्य पंक्तियाँ केवल:

]]

यह दृष्टिकोण यह सुनिश्चित करता है कि दृश्य विंडो के भीतर केवल आइटम प्रस्तुत किए जाते हैं, जबकि आगे की वस्तुओं को आभासी रूप से बनाया जाता है।

React.lazy और React नेविगेशन स्क्रीन के साथ कोड विभाजन

बड़े ऐप के लिए, आप React नेविगेशन के ] के साथ संयोजन में React.lazy का उपयोग करके प्रति स्क्रीन जावास्क्रिप्ट बंडल को विभाजित कर सकते हैं। हालांकि, ध्यान दें कि React नेविगेशन v6 घटक का सीधे उपयोग करता है, इसलिए आप इसे ऊपर दिखाए गए आलसी के साथ लपेट सकते हैं।

React Native में आलसी लोड करने के लिए सर्वश्रेष्ठ अभ्यास

  • ]की पहचान करें कि आलसी लोड [ - अपने ऐप को भारी घटकों को खोजने के लिए प्रोफाइल करें। आमतौर पर ये चार्ट, मैप्स, वीडियो प्लेयर, जटिल फॉर्म्स हैं और उपयोगकर्ता को शायद ही कभी विज़िट करने की स्क्रीन करते हैं।
  • ]Provide सार्थक Fallbacks - कंकाल स्क्रीन का प्रयोग करें, shimmer प्रभाव, या गतिविधि संकेतक इसलिए उपयोगकर्ता को कुछ पता है।
  • ]]]Chiching के साथ संयोजन - एक बार एक घटक लोड हो जाता है, इसे फिर से शुरू होने से बचने के लिए स्टेट मैनेजमेंट (जैसे रेडक्स, रिकोइल) या [[FLT: 21]]] का उपयोग करके स्मृति में रखने पर विचार करें।
  • ]Avoid आलसी लोडिंग trivial घटक - गतिशील आयात और Suspense के ओवरहेड बहुत छोटे घटकों (जैसे, एक एकल ) के लिए लाभ उठा सकते हैं।
  • ]निम्न अंत उपकरणों पर टेस्ट - सीमित रैम और धीमी सीपीयू वाले उपकरणों पर प्रदर्शन लाभ सबसे अधिक ध्यान देने योग्य हैं। उन स्थितियों को अनुकरण करें।
  • ]Use मेट्रो की इनलाइन आवश्यकता - पुरानी परियोजनाओं के लिए जो गतिशील आयात का उपयोग नहीं कर सकते हैं, मेट्रो मेट्रो का समर्थन ] मेट्रो के साथ को परिभाषित करने के लिए मेट्रो विन्यास में। यह एक कम स्तर का दृष्टिकोण है लेकिन प्रभावी है।

Them से बचने के लिए कैसे

1. ओवर-लॉयज लोड हो रहा है

हर एक घटक को लोड करने के लिए आलसी उपयोगकर्ता बहुत सारे लोडिंग स्पिनरों के साथ एक कूदने वाले उपयोगकर्ता अनुभव का कारण बन सकता है। केवल स्क्रीन और महंगे घटकों पर ध्यान केंद्रित करें।

2. संक्रमण के दौरान आलसी लोड हो रहा है

यदि आप आलसी एक स्क्रीन लोड करते हैं जो उपयोगकर्ता स्टैक या टैब संक्रमण के माध्यम से नेविगेट करता है, तो लोडिंग स्टेट एक जरा देरी पैदा कर सकता है। जब पिछली स्क्रीन पर चढ़कर या जब उपयोगकर्ता एक बटन पर हो जाता है, तब प्रीफ़्रेच पर विचार करें।

3. हैंडलिंग त्रुटियां नहीं

नेटवर्क के मुद्दों या बंडल भ्रष्टाचार के कारण गतिशील आयात विफल हो सकते हैं।

]]

4. असंगत व्यवहार मंचों के पार

आईओएस और एंड्रॉइड दोनों प्लेटफार्मों पर हमेशा परीक्षण कर सकते हैं।

प्रदर्शन मापन और निगरानी

आलसी लोडिंग को तैनात करने से पहले, बेसलाइन मीट्रिक को उपकरण का उपयोग करके स्थापित करें जैसे React Native Performance Monitor (विकास मेनू के माध्यम से उपलब्ध), Flipper], या React DevTools]]. Track:

  • प्रारंभिक प्रतिपादन (टीटीआईआर) के लिए समय
  • इंटरैक्टिव समय (टीटीआई)
  • आलसी लोडिंग से पहले और बाद में मेमोरी का उपयोग
  • प्रति चंक

कार्यान्वयन के बाद, सुधार को संशोधित करने के लिए फिर से शुरू होता है। कई वास्तविक दुनिया में प्रतिक्रियात्मक मूल एप्लिकेशन (जैसे, ]Shopify का ऐप ) में, आलसी लोडिंग ने 40% से अधिक स्टार्टअप टाइम को कम किया।

बाह्य संसाधन और आगे पढ़ना

निष्कर्ष

आलसी लोडिंग एक सिल्वर बुलेट नहीं है, लेकिन जब सही ढंग से लागू किया जाता है, तो यह एक प्रतिक्रियात्मक मूल डेवलपर के प्रदर्शन टूलकिट में सबसे शक्तिशाली उपकरणों में से एक है। गैर-आवश्यक घटकों, छवियों और स्क्रीन के लोडिंग को रोकने के द्वारा, आप नाटकीय रूप से प्रारंभिक लोड समय में कटौती कर सकते हैं, स्मृति दबाव को कम कर सकते हैं और अपने उपयोगकर्ताओं के लिए रेशमी-चिकनी अनुभव प्रदान कर सकते हैं। अपने ऐप में सबसे भारी अपराधियों के साथ शुरू करें - जैसे ही स्क्रीन, जटिल चार्ट, या शायद ही कभी टैब का दौरा किया - और धीरे-धीरे अन्य हिस्सों में आलसी लोडिंग का विस्तार कर सकते हैं। उपाय करने के लिए याद रखें, वास्तविक उपकरणों पर परीक्षण करें और सुंदर गिरावट प्रदान करें।