👩🏽‍🎨 ♌️ 🐩 प्रतिक्रिया अनुप्रयोगों का विश्लेषण और अनुकूलन 💼 ♌️ 🧘

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

सामग्री के लेखक, जिसका अनुवाद हम आज प्रकाशित करते हैं, निश्चित रूप से, चुटकुले। यहां हम बात करेंगे कि रिएक्ट एप्लिकेशन के प्रदर्शन का अनुकूलन कैसे करें। वैसे, शुरू करने से पहले, आइए इस बारे में सोचें कि वेबसाइट अनुकूलन की आम तौर पर आवश्यकता क्यों है। शायद हम यह कह सकते हैं कि साइट को अनुकूलन से पहले अधिक लोगों द्वारा उपयोग करने के लिए इसकी आवश्यकता है।

परिचय

साइट का अनुकूलन कैसे करें? आप साइट उपयोगकर्ताओं के लिए अनुकूलन के लाभों का मूल्यांकन कैसे कर सकते हैं? और आपको ऐसे संकेतकों के बारे में सोचने की आवश्यकता क्यों है?

हम रिएक्ट एप्लिकेशन बनाने के सबसे आसान तरीके को देखते हुए इन सवालों के जवाब देने की कोशिश करेंगे - क्रिएट-रिएक्शन-ऐप (सीआरए) टूल का उपयोग करके। इस उपकरण का उपयोग करके बनाई गई एक नई परियोजना में निम्नलिखित निर्भरताएं हैं:

मुख्य react पुस्तकालय, जो आपको प्रतिक्रिया घटकों के साथ काम करने की अनुमति देता है: 2.5 Kb।
react-dom लाइब्रेरी, जो घटकों को पृष्ठ पर प्रदर्शित करने की अनुमति देती है, उन्हें DOM ट्री में प्रविष्टि के लिए उपयुक्त संरचनाओं में बदल देती है: 30.7 Kb।
कोड की एक छोटी राशि, जिसमें पहले घटक का टेम्पलेट शामिल है: लगभग 3 Kb।

यह डेटा रिएक्ट 16.6.3 के लिए प्राप्त किया जाता है।

अपने मोटो जी 4 फोन पर एक नया सीआरए एप्लिकेशन डाउनलोड करने में कितना समय लगेगा, यह जानने के लिए, आप वेबपेज सेवा का उपयोग कर सकते हैं।

विभिन्न नेटवर्क का उपयोग करके Moto G4 पर वेबसाइट का लोड समय

यह एप्लिकेशन, "हैलो, वर्ल्ड" का एक प्रकार, फायरबेस होस्टिंग पर होस्ट किया गया है, इसे क्रोम ब्राउज़र में तीन प्रकार के कनेक्शन का उपयोग करके लोड करने की जांच की जा रही है:

4 जी (9 एमबीपीएस)
3 जी (1.6 एमबीपीएस)
धीमा 3G कनेक्शन (400 Kbps)

यहां आपको नेटवर्क देरी पर विचार करने की आवश्यकता है।

मैंने प्रयोग के लिए Moto G4 का उपयोग क्यों किया? यह उन फोन के समान एक सरल सस्ता फोन है, जो बुनियादी उपकरणों के रूप में, विकासशील देशों में कई लोगों द्वारा उपयोग किया जाता है। 4 जी नेटवर्क पर, एप्लिकेशन 2 सेकंड में लोड होता है। एक धीमे 3G नेटवर्क में, ऑनलाइन जाने के लिए एक पेज के लिए 4 सेकंड से अधिक समय लगता है।

हालाँकि ये मैट्रिक्स काफी दिलचस्प हैं, लेकिन ये विशेष रूप से उपयोगी नहीं हैं यदि आप नहीं जानते कि आपके उपयोगकर्ता कौन हैं। जिसे आप "धीमे" के रूप में परिभाषित करते हैं, वह पूरी तरह से उस चीज़ से भिन्न हो सकता है जिसे मैं या कोई और "धीमा" मानता है। और साइट के "तेज़" लोडिंग की आपकी धारणा आपके द्वारा उपयोग किए जाने वाले डिवाइस और नेटवर्क कनेक्शन से विकृत हो सकती है। यदि आप इस प्रयोग में एक वायर्ड कनेक्शन के माध्यम से इंटरनेट से जुड़ा एक डेस्कटॉप कंप्यूटर शामिल करते हैं, तो आप देख सकते हैं कि "तेज़" और "धीमी" साइट लोड करने में कितना अंतर हो सकता है।

डेस्कटॉप कंप्यूटर और मोटो जी 4 पर साइट लोड समय

प्रतिक्रिया-अनुप्रयोगों के प्रदर्शन को बेहतर बनाने के लिए, निर्माण का उपयोग रिएक्ट लाइब्रेरी का उपयोग करता है, जैसा कि वे कहते हैं, "आउट ऑफ द बॉक्स", रिएक्ट डोम में सुधार को रेखांकित किया गया है जिसका उद्देश्य कुछ चीजों को सरल बनाना है। तो, इवेंट सिस्टम में कई पॉलीफिल होते हैं, जो कई नए ब्राउज़रों के लिए आवश्यक नहीं होते हैं, और यदि संभव हो तो उन्हें हटाने या सरल बनाने के लिए विकास टीम विकल्पों पर विचार कर रही है। आप इसे यहाँ देख सकते हैं ।

क्या मैं वेबसाइट प्रदर्शन के वर्तमान स्तर को माप सकता हूं?

एक विशिष्ट प्रतिक्रिया आवेदन में कई तृतीय-पक्ष घटक और लाइब्रेरी शामिल हो सकते हैं। इसका मतलब यह है कि "हैलो, वर्ल्ड" एप्लिकेशन का प्रदर्शन हमें विशेष रूप से मूल्यवान जानकारी प्रदान नहीं करता है कि वास्तविक एप्लिकेशन कैसे लोड होते हैं। क्या यह पता लगाने का एक तरीका है कि कुछ प्रौद्योगिकी (जैसे रिएक्ट) का उपयोग करके बनाए गए अधिकांश साइटें कितना उच्च प्रदर्शन करती हैं?

HTTP संग्रह संसाधन हमें इस प्रश्न का उत्तर देने में मदद कर सकता है। यह एक ओपन सोर्स प्लेटफॉर्म है जो वेब को कैसे बनाया जाता है, इस पर ध्यान केंद्रित करता है। यह लाखों साइटों के मासिक क्रॉलिंग द्वारा किया जाता है, वेबपेजेस्ट का उपयोग करके उनका विश्लेषण करना और उनके बारे में जानकारी दर्ज करना। इस जानकारी में प्रश्नों की संख्या, डेटा लोडिंग के बारे में मीट्रिक, प्रेषित डेटा के आकार और अन्य संकेतक शामिल हैं।

यहां एक और दिलचस्प टूल है - क्रोम के लिए एक एक्सटेंशन जिसे लाइब्रेरी-डिटेक्टर-फॉर-क्रोम कहा जाता है। यह आपको यह पता लगाने की अनुमति देता है कि पृष्ठ पर कौन से जावास्क्रिप्ट लाइब्रेरी का उपयोग किया जाता है। इसे हाल ही में लाइटहाउस में पेज ऑडिट टूल के रूप में शामिल किया गया है। इससे पता चलता है कि यह एक्सटेंशन जो जानकारी प्रदान करता है वह उन कई साइटों के लिए प्राप्त की जा सकती है जिनकी जानकारी HTTP संग्रह में संग्रहीत है। यह उन लोगों की मदद कर सकता है जो एक विशिष्ट जावास्क्रिप्ट पुस्तकालय का उपयोग करने वाले हजारों साइटों के परीक्षा परिणामों का विश्लेषण करना चाहते हैं (प्रतिक्रिया निर्धारित करने का तंत्र यहां है )।

पूर्ण HTTP आर्काइव डेटासेट सार्वजनिक रूप से उपलब्ध है और इसे BigQuery पर पाया जा सकता है। कृत्रिम रूप से सिम्युलेटेड मोबाइल वातावरण (डेटासेट 2019_01_01 ) में उन्हें लोड करने के लिए रिएक्ट का उपयोग करके 140,000 साइटों पर शोध करने के बाद, हम निम्नलिखित का पता लगाने में कामयाब रहे:

प्रथम सार्थक पेंट इंडिकेटर का माध्य (पहला महत्वपूर्ण प्रदर्शन, महत्वपूर्ण तत्वों को खींचने का समय) 6.9 एस था।
इंटरएक्टिव इंडिकेटर के समय का मध्यकाल (अन्तरक्रियाशीलता का समय, अंतःक्रियात्मक तत्वों का भार) 19.7 सेकेंड का था।

आप स्वयं इस डेटा को देख सकते हैं।

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

साइट प्रदर्शन को प्रभावित करने वाले कई कारक हैं। उनमें से - उपयोगकर्ता को भेजे गए जावास्क्रिप्ट कोड की मात्रा, चित्र की संख्या और पृष्ठ पर प्रदर्शित अन्य सामग्री, और इसी तरह। यह गलत तरीके से किसी भी रिएक्ट-आधारित साइटों के प्रदर्शन की तुलना "हैलो, वर्ल्ड" नामक पृष्ठ के प्रदर्शन के साथ करेगा यदि अन्य कारकों को ध्यान में नहीं रखा गया है।
यदि आप प्रतिक्रिया अनुरोध में कुछ अन्य लाइब्रेरी के नाम को बदलकर डेटा प्राप्त करने का प्रयास करते हैं, तो आपको बहुत समान संख्याएँ मिलेंगी।

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

जावास्क्रिप्ट कोड वृद्धि

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

74.7 Kb - मोबाइल वेब पेज, 15 दिसंबर, 2011।
384.4 Kb - मोबाइल वेब पेज, 15 दिसंबर 2018।

यह ध्यान में रखा जाना चाहिए कि यह डेटा लाखों पृष्ठों के प्रसंस्करण के बाद प्राप्त किया गया था। संभवतः हजारों एटिपिकल साइटें हैं जो इस सूचक को विकृत करती हैं। यह एक व्यवहार्य विचार है। इसलिए, हम यह पता लगाने की कोशिश करेंगे कि यह संकेतक एलेक्सा रैंकिंग से पहले 10,000 साइटों के लिए कैसा दिखता है:

381.5 Kb - मोबाइल वेब पेज, 15 दिसंबर, 2018 (यहां अनुरोध है )।

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

यह ध्यान रखना महत्वपूर्ण है कि प्रत्येक साइट अद्वितीय है, साथ ही साथ प्रत्येक साइट का उपयोगकर्ता आधार भी है। कई डेवलपर्स, जिनकी साइटों में 300 से अधिक केबी जेएस कोड शामिल हैं, इस तथ्य का सामना नहीं करते हैं कि उनके अधिकांश उपयोगकर्ता प्रदर्शन समस्याओं से पीड़ित हैं, और यह पूरी तरह से सामान्य है। हालांकि, अगर आप चिंतित हैं कि वास्तविक स्थिति का आकलन करने के लिए आपके उपयोगकर्ताओं के लिए आपकी प्रतिक्रिया साइट को देखना मुश्किल हो सकता है, तो प्रोफाइलिंग के साथ शुरू करना सबसे अच्छा है।

पेज प्रोफाइलिंग और विश्लेषण

प्रोफाइलिंग अनुप्रयोगों का विश्लेषण और विश्लेषण दो दृष्टिकोणों से देखा जा सकता है:

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

प्रदर्शन मूल्यांकन और घटक अनुकूलन

आइए एक वाक्य में व्यक्त करने का प्रयास करें कि रिएक्ट सुलह एल्गोरिथ्म का अर्थ, या जिसे "वर्चुअल डोम" कहा जाता है। यह इस तरह दिखेगा: "रिएक्ट नए DOM ट्री और पुराने ट्री के बीच अंतर करने के लिए कदम उठाता है ताकि यह समझने के लिए कि उपयोगकर्ता इंटरफ़ेस में वास्तव में क्या अपडेट किया जाना चाहिए जब घटक में डेटा बदलता है।" यह सिस्टम पर बहुत कम लोड बनाता है पूरे राज्य में पुन: रेंडर करने की तुलना में हर बार स्थिति या गुण बदलते हैं ( यहां आप ओ (एन ³ ) और ओ (एन) के बीच अंतर के बारे में पढ़ सकते हैं)। यहाँ दान अब्रामोव का एक लेख है, जहाँ आप सामंजस्य के बारे में स्पष्टीकरण पा सकते हैं।

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

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

Chrome डेवलपर टूल डैशबोर्ड।
रिएक्टर डेवलपर टूल प्रोफाइलर।

Chrome डेवलपर टूल प्रदर्शन पैनल का उपयोग करके प्रदर्शन विश्लेषण

प्रतिक्रिया घटक के जीवन चक्र के प्रत्येक चरण में लगने वाले समय को मापने के लिए उपयोगकर्ता समय एपीआई का उपयोग करता है। Chrome डेवलपर टूल का उपयोग करके रिएक्ट एप्लिकेशन की प्रदर्शन जानकारी एकत्र की जा सकती है और उसका विश्लेषण किया जा सकता है। यह आपको यह समझने की अनुमति देता है कि घटक कितने प्रभावी ढंग से जुड़े हुए हैं, पृष्ठ पर प्रदर्शित होते हैं और पृष्ठ के साथ उपयोगकर्ता की बातचीत के दौरान डिस्कनेक्ट हो जाते हैं या जब यह पुनः लोड होता है।

घटक प्रदर्शन विश्लेषण

इस विषय पर कुछ अच्छी सामग्री है, जो क्रोम डेवलपर टूल का उपयोग करके रिएक्ट 16 के उपयोग से लिखे गए अनुप्रयोगों के प्रदर्शन पर शोध करने के लिए समर्पित है।

उपयोगकर्ता समय एपीआई का उपयोग केवल विकास के दौरान किया जाता है। यह, उत्पादन में, बंद है। ऐसी स्थितियों में, प्रदर्शन पर गंभीर प्रभाव न रखते हुए, ऐसे तंत्रों का तेजी से कार्यान्वयन किया जा सकता है। यह ऐसे तंत्रों की आवश्यकता थी जो नए एपीआई प्रोफाइलर के विकास के कारणों में से एक बन गए।

Tools रिएक्टर डेवलपर टूल से प्रोफाइलर का उपयोग करके प्रदर्शन का एनलिसिस

रिएक्टर-डेवलपर उपकरणों में react-dom 16.5 लाइब्रेरी की रिहाई के साथ, प्रॉलेयर नामक एक नए पैनल का उपयोग किया जा सकता है। यह आपको घटक प्रतिपादन के प्रदर्शन का विश्लेषण करने की अनुमति देता है। यह प्रोइलर एपीआई का उपयोग करके किया जाता है, जो सभी घटकों के संचालन के निष्पादन के समय के बारे में जानकारी एकत्र करता है जो फिर से प्रदान की जाती हैं।

Profiler पैनल रिएक्टर डेवलपर टूल में एक स्टैंडअलोन टैब है। यहां, Chrome डेवलपर टूल टूलबार प्रदर्शन पैनल के साथ, आप घटक प्रदर्शन का विश्लेषण करने के लिए डेटा एकत्र करने के लिए उपयोगकर्ता कार्यों और पृष्ठ लोड के बारे में जानकारी रिकॉर्ड कर सकते हैं।

React Developer Tools के साथ डेटा एकत्र करना

डेटा संग्रह पूरा होने के बाद, तथाकथित "उग्र ग्राफ" प्रदर्शित किया जाएगा, जो पृष्ठ पर घटकों को प्रस्तुत करने के लिए आवश्यक समय दिखाएगा।

ज्वलंत Profiler अनुसूची

यहां आप अलग-अलग कमिट्स या राज्यों के बीच स्विच कर सकते हैं, जब DOM नोड्स जोड़े गए, हटाए गए या अपडेट किए गए। यह आपको घटकों के साथ विभिन्न कार्यों पर कितना समय खर्च करने के बारे में अधिक जानकारी प्राप्त करने की अनुमति देता है।

प्रोफाइलर में जानकारी देखें

यहां प्रस्तुत स्क्रीनशॉट एक साधारण एप्लिकेशन में किए गए उपयोगकर्ता कार्यों को रिकॉर्ड करने के परिणामस्वरूप प्राप्त डेटा का प्रतिनिधित्व करते हैं। एक बटन पर क्लिक करने पर एप्लिकेशन ट्रेंडिंग GitHub रिपॉजिटरी की सूची डाउनलोड करता है। जैसा कि आप देख सकते हैं, यहाँ केवल दो ही हैं:

एक लोडिंग इंडिकेटर के लिए है, जो आइटम की सूची को लोड करने के दौरान प्रदर्शित होता है।
एक और उस क्षण का प्रतिनिधित्व करता है जब एपीआई पर कॉल पूरा हो जाता है और सूची डोम में प्रदर्शित होती है।

दाईं ओर का आंकड़ा उपयोगी मेटाडेटा दिखाता है जिसमें प्रतिबद्ध जानकारी या घटक डेटा शामिल हैं, जैसे कि गुण और स्थिति।

मेटाडाटा

रिएक्ट प्रोफाइलर के साथ काम करते समय, आप विभिन्न ग्राफ़ द्वारा दर्शाए गए अन्य डेटा भी देख सकते हैं। आप इस पोस्ट में React ब्लॉग के React प्रोफाइलर के बारे में अधिक पढ़ सकते हैं।

हमारे उदाहरण को थोड़ा जटिल करने के लिए, एक समान स्थिति पर विचार करें, लेकिन अब हम विभिन्न प्रोग्रामिंग भाषाओं (जैसे गोलंग, जावास्क्रिप्ट और इसी तरह) में ट्रेंडिंग रिपॉजिटरी डाउनलोड करने के लिए कई एपीआई कॉल करेंगे। जैसा कि आप उम्मीद कर सकते हैं, इस दृष्टिकोण के साथ, हमारे पास हमारे निपटान में अधिक आवागमन है।

आवेदन के साथ काम करने की योजना को जटिल करते हुए कमिट की संख्या बढ़ाना

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

Re अनावश्यक घटक को फिर से प्रस्तुत करना परिचालन को कम करना

प्रतिक्रिया-घटकों को फिर से प्रस्तुत करने के लिए अनावश्यक संचालन से छुटकारा पाने के कई तरीके हैं, या कम से कम ऐसे ऑपरेशनों की संख्या को कम करने के लिए। आइए उनमें से कुछ पर विचार करें।

आप shouldComponentUpdate () के घटक जीवन चक्र विधि का उपयोग कर सकते हैं:
```
 shouldComponentUpdate(nextProps, nextState) { // true        } 
```
आप क्लास-आधारित घटकों के निर्माण के लिए PureComponent का उपयोग कर सकते हैं:
```
 import React, { PureComponent } from 'react'; class AvatarComponent extends PureComponent { } 
```
कार्यात्मक घटकों के लिए, आप मेमो का उपयोग कर सकते हैं:
```
 import React, { memo } from 'react'; const AvatarComponent = memo(props => { }); 
```
आप Redux चयनकर्ताओं को याद कर सकते हैं (उदाहरण के लिए, reselect का उपयोग करके)।
आप वर्चुअलाइजेशन (उदाहरण के लिए, प्रतिक्रिया-विंडो का उपयोग करके) बहुत लंबी सूचियों के आउटपुट का अनुकूलन कर सकते हैं ।

यहां और वहां - उपयोगी वीडियो के एक जोड़े, जो अनुप्रयोगों में अड़चन खोजने के लिए रिएक्ट प्रोफाइलर के उपयोग पर चर्चा करता है।

प्रदर्शन मूल्यांकन और अनुप्रयोग अनुकूलन

DOM म्यूटेशन और कंपोनेंट री-रेंडरिंग ऑपरेशंस का विश्लेषण करने के अलावा, अन्य उच्च-स्तरीय घटनाएं हैं जो खोज के लायक हैं। साइट प्रदर्शन के व्यापक मूल्यांकन के लिए, आप लाइटहाउस का उपयोग कर सकते हैं।

लाइटहाउस का उपयोग करके वेब पेज का परीक्षण करने के तीन तरीके हैं:

Node.js. कमांड लाइन इंटरफ़ेस का उपयोग करना
Chrome एक्सटेंशन का उपयोग करना।
Chrome डेवलपर टूल के ऑडिट टूलबार का उपयोग करें।

ऑडिट पैनल में लाइटहाउस कैसा दिखता है।

ऑडिट पैनल पर प्रकाशस्तंभ

प्रकाशस्तंभ को आमतौर पर पृष्ठ से अपनी आवश्यकता के सभी डेटा एकत्र करने और इस डेटा की कई जांच करने के लिए बहुत समय की आवश्यकता नहीं होती है। इन ऑपरेशनों के पूरा होने के बाद, लाइटहाउस सारांश जानकारी के साथ एक रिपोर्ट प्रदर्शित करता है।

यह समझने के लिए कि किसी पृष्ठ को ब्राउज़र में लोड करने में बहुत अधिक जावास्क्रिप्ट कोड लोड होता है, और यह निष्कर्ष निकालने के लिए कि इस कोड की मात्रा कम की जानी चाहिए, आपको रिपोर्ट से निम्नलिखित वाक्यांशों पर ध्यान देने की आवश्यकता है:

रेंडर-ब्लॉकिंग संसाधनों को हटा दें
जावास्क्रिप्ट बूट-अप समय बहुत अधिक है
भारी नेटवर्क पेलोड से बचें

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

▍ जेएस बंडल जुदाई

कोड को भागों में विभाजित करने का एक तरीका गतिशील आयात का उपयोग करना है:

   import('lodash.sortby')   .then(module => module.default)   .then(module => doSomethingCool(module))

आयात सिंटैक्स एक फ़ंक्शन कॉल की तरह लग सकता है, लेकिन यह आपको वादे तंत्र का उपयोग करते हुए अतुल्यकालिक रूप से किसी भी मॉड्यूल को आयात करने की अनुमति देता है। इस उदाहरण में, पहले lodash विधि को lodash लाइब्रेरी से आयात किया lodash है, और फिर doSomethingCool() विधि को doSomethingCool() ।

नंबर छांटने के लिए आवेदन

इस उदाहरण में, निम्नलिखित होता है:

उपयोगकर्ता तीन नंबर को सॉर्ट करने के लिए एक बटन क्लिक करता है।
आयातित lodash.sortby ।
doSomethingCool() विधि को doSomethingCool() , जो संख्याओं को doSomethingCool() करता है और उन्हें नए DOM नोड में प्रदर्शित करता है।

यह एक अत्यंत सरल, कृत्रिम उदाहरण है, क्योंकि यदि किसी को वेब पेज पर संख्याओं को क्रमबद्ध करना है, तो वह संभवतः Array.prototype.sort() विधि का उपयोग करेगा। , , .

, JavaScript TC39. Chrome Safari , Webpack , Rollup Parcel .
React, , . — React.lazy :

 import React, { lazy } from 'react'; const AvatarComponent = lazy(() => import('./AvatarComponent'));

, , , . Suspense , , «» . React.lazy , , , :

 import React, { lazy, Suspense } from 'react'; import LoadingComponent from './LoadingComponent'; const AvatarComponent = lazy(() => import('./AvatarComponent')); const PageComponent = () => ( <Suspense fallback={LoadingComponent}>   <SomeComponent /> </Suspense> )

Suspense . React-, , , , React, loadable-components .

 import React from 'react'; import loadable from '@loadable/component' import LoadingComponent from './LoadingComponent'; const AvatarComponent = loadable(() => import('./AvatarComponent'), {   LoadingComponent: () => LoadingComponent });

LoadingComponent loadable-component .

, , loadable-components , - .

, . , , . React , React Suspense .

▍ , ?

, react-loadable-visibility , loadable-components -API Intersection Observer. , .

 import React from 'react'; import loadableVisibility from 'react-loadable-visibility/loadable-components' const AvatarComponent = loadableVisibility(() => import('./AvatarComponent'), { LoadingComponent: Loading, })

▍ ,

- — -, . - , , . , , , -, -, , .

Workbox — , -, . CRA 2.0 , , src/index.js . - .

   import React from 'react'; //... //   ,          //    ,     // unregister()  register().    ,     - //    . //     : http://bit.ly/CRA-PWA serviceWorker.unregister();

- Workbox .

▍

- HTML-, , , . , , , , , JS-, .

, , DOM-, , , (, hydrate() React). , , , , .

React 16, . renderToString() HTML-, renderToNodeStream() Readable- Node.

HTML- , . , , .

React , , , renderToStaticNodeStream .

▍ ,

- , , , , - , , . , , .

, , , . HTML- , .

, react-snap , Puppeteer .

, .

▍ , CSS-in-JS

React-, , CSS-in-JS- emotion styled-components . , , , , , . CSS-in-JS , , , . , , JavaScript- , , . , , , .

, ( )

- , . emotion styled-components . Readable- Node. Glamor , .

, .

Preact-, ( )

, CSS-in-JS — , , , , , astroturf . , , , , .

▍

«», , . , , .

, Lighthouse. , React-, React A11y .

, react-axe , , JSX-.

▍

? -, , ? , ?

, - . «» . , — , .

create-react-app -:

 { "short_name": "React App", "name": "Create React App Sample", "icons": [   {     "src": "favicon.ico",     "sizes": "64x64 32x32 24x24 16x16",     "type": "image/x-icon"   } ], "start_url": ".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" }

, . , , . — . ऐसा क्यों है? , , .

▍Atomic CSS

CSS- (Atomic CSS) , . , , :

 <button class="bg-blue">Click Me</button>

padding :

 <button class="bg-blue pa2">Click Me</button>

और इसी तरह। class DOM, , , CSS-, . , . Tachyons .

. tachyon-components API, API styled-components :

 import styled from 'tachyons-components' const Button = styled('button')` bg-blue pa2 ` <Button>Click Me</Button>

, , CSS- «» , CSS-, , .

▍

, , . — :

 import { useState } from 'react'; function AvatarComponent() { const [name, setName] = useState('Houssein'); return (   <React.Fragment>     <div>       <p>This is a picture of {name}</p>       <img align="center" src="avatar.png" />     </div>     <button onClick={() => setName('a banana')}>       Fix name     </button>   </React.Fragment> ); }

, ( useState ).
, ( useEffect ).
.

, . , , recompose .

React Conf, .

, , JavaScript- . , React , 1.5 ( ). , - , , , , , , , .

परिणाम

, React-. , , :

, :
- Performance Chrome.
- React.
- , , shouldComponentUpdate() .
- , , PureComponent .
- React.memo .
- Redux (, reselect ).
- (, react-window ).
Lighthouse.
, :
- — React.lazy .
- — loadable-components .
- - , . Workbox .
- — ( renderToNodeStream renderToStaticNodeStream ).
- ? react-snap .
- , CSS-in-JS.
- , . React A11y react-axe .
- - , , , .

, React, , :

API, , .
, , , .

« » . -, .

प्रिय पाठकों! React-?

प्रतिक्रिया अनुप्रयोगों का विश्लेषण और अनुकूलन