बंडल के आकार को वेबपैक एनालाइजर और रिएक्ट आलसी / सस्पेंस के साथ कम करना

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



लेख का लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, विक्स में काम करता है। वह इस बारे में बात करना चाहता है कि कैसे वह वेबपैक एनालाइजर और रिएक्ट लेजी / सस्पेंस का उपयोग करके एक बंडल के आकार को लगभग 80% तक कम करने में सक्षम था।

शुरू करने के लिए अनुकूलन कितना जल्दी है?

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

यहाँ कुछ महान उपकरण हैं जो मुझे लगता है कि शुरू से ही उपयोग किया जाना चाहिए। आवेदन में किसी भी महत्वपूर्ण स्थान पर कब्जा करने से पहले ही ये उपकरण आपको "समस्याग्रस्त" एनपीएम पैकेजों को पहचानने में मदद करेंगे।

▍Bundlephobia

बंडलफोबिया एक ऐसी साइट है जो आपको बताती है कि एक निश्चित एनपीएम पैकेज बंडल के आकार को कितना बढ़ाएगा। प्रोग्रामर को तीसरे पक्ष के पैकेजों की पसंद के बारे में सही निर्णय लेने में मदद करने के लिए यह एक बढ़िया उपकरण है जिसकी उसे आवश्यकता हो सकती है। बंडलफोबिया एप्लिकेशन आर्किटेक्चर को डिजाइन करने में मदद करता है ताकि इसका आकार बहुत बड़ा न हो। निम्नलिखित आंकड़ा समय के साथ काम करने के लिए एक लोकप्रिय पुस्तकालय की जांच के परिणामों को दर्शाता है, जिसे पल कहा जाता है। आप देख सकते हैं कि यह लाइब्रेरी काफी बड़ी है - लगभग 66 केबी संक्षिप्त रूप में। हाई-स्पीड इंटरनेट पर काम करने वाले कई उपयोगकर्ताओं के लिए, यह कुछ भी नहीं है। हालांकि, यह ध्यान देने योग्य है कि 2 जी / 3 जी नेटवर्क में इस पैकेज का डाउनलोड समय क्या है। यह क्रमशः 2.2 और 1.32 सेकंड है। और, ध्यान दें, हम केवल इस एक पैकेज के बारे में बात कर रहे हैं।


बंडलफोबिया पल पैकेज विश्लेषण के परिणाम

Mइम्पोर्ट कॉस्ट

आयात लागत कई लोकप्रिय कोड संपादकों के लिए एक बहुत ही रोचक विस्तार है (इसमें वीएस कोड के लिए एक मिलियन से अधिक डाउनलोड हैं)। यह आयातित पैकेजों की "लागत" दिखा सकता है। मुझे यह विशेष रूप से पसंद है क्योंकि यह इस पर काम करते समय एप्लिकेशन के समस्या क्षेत्रों की पहचान करने में मदद करता है। निम्न आंकड़ा (आयात लागत GitHub पृष्ठ से लिया गया है) आयात करने वाली संस्थाओं के लिए एक अलग दृष्टिकोण के परियोजना आयामों पर प्रभाव का एक उत्कृष्ट उदाहरण दिखाता है। इसलिए, uniqueId से एकमात्र uniqueId संपत्ति का आयात करने से परियोजना में पूरे पुस्तकालय का आयात होता है (70 Kb)। और अगर आप सीधे uniqueId फंक्शन को uniqueId करते हैं, तो प्रोजेक्ट आकार में केवल 2 Kb जोड़े जाएंगे। आयात लागत के बारे में यहाँ और पढ़ें।


पूरे लॉडश पुस्तकालय को परियोजना में आयात करने की "लागत" और इस पुस्तकालय से केवल एक विशिष्ट कार्य

अनुचित रूप से बड़े बंडलों का मामला

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

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

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


प्रगति बार और बधाई विंडो

क्या हुआ था? हमारे विश्लेषकों ने मुझसे शिकायत क्यों की कि पृष्ठ लोड समय बढ़ गया है? जब मैंने Chrome डेवलपर टूल के नेटवर्क टैब का उपयोग करके मामलों की स्थिति की जांच की, तो यह तुरंत मेरे लिए स्पष्ट हो गया कि मेरा बंडल बहुत बड़ा था। अर्थात्, इसका आकार 190 Kb था।


Chrome डेवलपर टूल का उपयोग करके बंडल आकार मिला

"इस छोटी सी चीज़ को अपेक्षाकृत बड़े बंडल की आवश्यकता क्यों है?" मैंने तब सोचा। लेकिन सच्चाई - क्यों?

बंडल में समस्या स्पॉट के लिए खोजें

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

इस उपकरण के साथ बंडल का विश्लेषण करने के बाद ऐसा ही हुआ।


Webpack बंडल विश्लेषक परिणाम

विश्लेषक की मदद से, मैं "अपराधी" का पता लगाने में सक्षम था। लॉटी-वेब पैकेज का उपयोग यहां किया गया था, जिसने बंडल के आकार में 61.45 Kb जोड़ा। Lottie एक बहुत अच्छी जावास्क्रिप्ट लाइब्रेरी है जो Adobe After Effects में निर्मित एनिमेशन के आउटपुट के लिए मानक ब्राउज़र टूल्स का उपयोग करने की अनुमति देती है। मेरे मामले में, यह ऐसा था कि हमारे डिजाइनर को एक अच्छे एनीमेशन की आवश्यकता थी, जो कि बधाई के साथ खिड़की दिखाई देने पर किया गया था। उन्होंने इस एनीमेशन को बनाया और मुझे JSON फ़ाइल के रूप में दिया, जिसे मैंने Lottie पैकेज में स्थानांतरित कर दिया और एक सुंदर एनीमेशन प्राप्त किया। लॉटी-वेब पैकेज के अलावा, मेरे पास एनीमेशन विवरण के साथ एक JSON फ़ाइल भी थी। इस फाइल का साइज 26 Kb था। नतीजतन, Lottie पुस्तकालय, JSON फ़ाइल, और कुछ सहायक छोटी निर्भरता "लागत" मुझे लगभग 94 Kb। और यह उपयोगकर्ता को बधाई के साथ खिड़की का सिर्फ एक एनीमेशन है। उपयोगकर्ता, जब उसने ये बधाई देखी, तो उसे खुश होना चाहिए था। इस सब ने मुझे दुखी किया।

रिएक्ट लेजी / सस्पेंस तकनीक बचाव के लिए आती है

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

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

प्रतिक्रिया 16.6.0 (और नए संस्करणों) में एक साधारण एपीआई है जिसे आलसी घटकों को प्रस्तुत करने के लिए डिज़ाइन किया गया है। ये React.lazy और React.Suspense हैं । एक उदाहरण पर विचार करें:

 const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() {  return (    <div>      <React.Suspense fallback={<div>Loading...</div>}>        <OtherComponent />      </React.Suspense>    </div>  ); } 

हमारे पास एक घटक है जो <div> तत्व प्रदर्शित करता है, और इसमें एक Suspense घटक होता है जो अन्य OtherComponent घटक को लपेटता है। यदि आप इस उदाहरण की पहली पंक्ति को देखते हैं, तो आप देख सकते हैं कि OtherComponent सीधे कोड में आयात नहीं किया गया है। आमतौर पर, इस तरह का import OtherComponent from './OtherComponent'; आयात जैसा दिखता है import OtherComponent from './OtherComponent'; ।

इसके बजाय, आयात कमांड को एक फ़ंक्शन के रूप में तैयार किया जाता है जो फ़ाइल पथ लेता है। यह तंत्र काम करता है क्योंकि वेबपैक में अंतर्निहित कोड पृथक्करण उपकरण हैं। जब एक समान निर्माण कोड में मौजूद होता है, तो एक वादा वापस किया जाता है, जो फ़ाइल डाउनलोड करने के बाद, इस फ़ाइल की सामग्री के साथ हल हो जाता है। हमारी आयात टीम एक React.lazy फ़ंक्शन में React.lazy है।

MyComponent द्वारा MyComponent गई रेंडरिंग सामग्री में, OtherComponent React.Suspense घटक में लपेटा OtherComponent , OtherComponent एक React.Suspense प्रॉपर्टी होती है। हमारे मामले में, यह पता चलता है कि जब रेंडरिंग OtherComponent पहुंचता है, तो संबंधित घटक की लोडिंग शुरू होती है। इस बीच, क्या है जो fallback प्रॉपर्टी को लिखा गया है। इस उदाहरण में, यह पाठ Loading… वह, वास्तव में, सब है। ये तंत्र सिर्फ अपना काम करते हैं।

सच है, कुछ विशेषताएं हैं जिन्हें आपको आलसी / रहस्य के साथ काम करने पर विचार करने की आवश्यकता है।

1. एक घटक जिसे "आलसी" तरीके से आयात किया जाता है, उसमें डिफ़ॉल्ट निर्यात होना चाहिए, जो घटक का प्रवेश बिंदु होगा। नामित निर्यात का उपयोग यहां नहीं किया जा सकता है।
2. आपको React.Suspense घटक में React.lazy फ़ंक्शन का उपयोग करके आयातित घटक को लपेटने की आवश्यकता है। React.Suspense घटक React.Suspense संपत्ति प्रदान करने की React.Suspense है। अन्यथा, एक त्रुटि उत्पन्न होगी। हालांकि, यदि आप बस कुछ भी प्रस्तुत नहीं करना चाहते हैं, जब तक कि घटक ने आलसी लोडिंग को समाप्त नहीं कर दिया है, तो आप बस बिना किसी पेचीदा तरीके से इस संपत्ति में कुछ लिखने की आवश्यकता को दरकिनार करने की कोशिश कर सकते हैं।

क्या रिएक्ट लेज़ी / सस्पेंस का उपयोग करने से मुझे मदद मिली?

हाँ, इससे मदद मिली! कोड विभाजन ने आश्चर्यजनक रूप से काम किया। आइए वेबपैक का उपयोग करके नए बंडल के विश्लेषण के परिणामों पर एक नज़र डालें।


कोड बंटवारे के बाद Webpack बंडल विश्लेषक परिणाम

जैसा कि आप देख सकते हैं, मेरे बंडल का आकार लगभग 50% - 96 Kb तक कम हो गया। बहुत बढ़िया!

तो क्या, अब समस्या हल हो गई है? नहीं, दुर्भाग्य से। जब मैंने पृष्ठ को देखा, तो यह पता चला कि बधाई के साथ पॉप-अप ने खोई स्थिति को खो दिया।


बधाई विंडो दिखाई नहीं देती है जहां आपको इसकी आवश्यकता है

समस्या यह थी कि मैंने प्रतिक्रिया घटक की स्थिति को बदलकर खिड़की को "खोलने" के लिए कहा। इस बीच, मैं पहले से ही React.Suspense । घटक का उपयोग करते हुए null (यानी, मैंने कुछ भी प्रदान नहीं किया है)। आवश्यक डेटा के आलसी लोड होने के बाद, प्रासंगिक सामग्रियों को डोम में जोड़ा गया था। हालाँकि, पॉपअप की स्थिति पहले ही हो चुकी है। नतीजतन, इस तथ्य के कारण कि संबंधित घटक के गुणों में बदलाव नहीं हुआ, यह घटक "नहीं जानता था" कि इसे स्थिति के बारे में समस्या को हल करने की आवश्यकता है। यदि मैंने ब्राउज़र विंडो का आकार बदल दिया है, तो पॉप-अप विंडो सही जगह पर दिखाई देती है इस तथ्य के कारण कि संबंधित घटक विंडो को आकार देने, आरंभ करने, यदि आवश्यक हो, पुन: स्थिति के गुणों और घटनाओं में परिवर्तन देख रहा था।

इस समस्या को कैसे हल करें? समाधान "मध्यस्थ" को खत्म करना था।

मुझे पहले "आलसी" घटक को लोड करना था, और उसके बाद ही राज्य को लिखें जो बधाई के साथ खिड़की को बताएगा कि इसे खोलने की आवश्यकता है। मैं एक ही Webpack कोड शेयरिंग तंत्र का उपयोग करके ऐसा करने में सक्षम था, लेकिन अब - React.lazy का उपयोग करके आयात को लागू किए बिना:

 async loadAndSetHappyMoment() {  const component = await import(    '../SidebarHappyMoment/SidebarHappyMoment.component'  );  this.SidebarHappyMoment = component.SidebarHappyMoment;  this.setState({    tooltipLevel: TooltipLevel.happyMoment,  }); } 

यह फ़ंक्शन मेरे घटक के बाद कहा जाता है, वेब सॉकेट्स के तंत्र के माध्यम से सूचित किया जाता है कि इसे बधाई के साथ एक खिड़की दिखाने की आवश्यकता है। मैंने वेबपैक import फ़ंक्शन (कोड की दूसरी पंक्ति) का उपयोग किया। यदि आपको याद है, तो मैंने ऊपर कहा था कि यह फ़ंक्शन एक वादा लौटाता है, जिसके परिणामस्वरूप मैं async/await निर्माण का उपयोग करने में सक्षम था।

घटक के लोडिंग समाप्त हो जाने के बाद, मैं इसे अपने घटक के उदाहरण के साथ this.SidebarHappyMoment = component.SidebarHappyMoment; हूं (कमांड के साथ। this.SidebarHappyMoment = component.SidebarHappyMoment; )। यह मुझे बाद में इसका इस्तेमाल करने का अवसर देता है। कृपया ध्यान दें कि मैं अब नामित निर्यात का उपयोग कर सकता हूं। मेरे मामले में, मैंने उपरोक्त पंक्ति में, SidebarHappyMoment नाम का SidebarHappyMoment । और अंत में, और यह सब कुछ से कम महत्वपूर्ण नहीं है, मैं खिड़की को "सूचित" करता हूं जिसे उसके राज्य को बदलने की आवश्यकता है, तदनुसार मुझे पता है कि घटक ऑपरेशन के लिए तैयार है।

परिणामस्वरूप, रेंडरिंग कोड अब इस तरह दिखता है:

 renderTooltip() {  if (this.state.tooltipLevel === TooltipLevel.happyMoment) {    return <this.SidebarHappyMoment />;  }  // ... } 

ध्यान दें कि कमांड return <this.SidebarHappyMoment />; यह देता है। this.SidebarHappyMoment - जो मैंने पहले अपने घटक के उदाहरण में लिखा था। अब यह एक सामान्य सिंक्रोनस रेंडर फ़ंक्शन है, जो कि आपने एक मिलियन बार उपयोग किया है। और अब बधाई के साथ खिड़की बिल्कुल वही प्रदर्शित होती है जहां इसे प्रदर्शित किया जाना चाहिए। और बात यह है कि यह अपनी सामग्री के उपयोग के लिए तैयार होने के बाद ही खुलता है।

उत्पाद वास्तुकला को परिभाषित करता है

यदि इस खंड के शीर्षक में विचार से आपकी कल्पना में भारी सवालिया निशान उठता है, तो अवगत रहें कि यह मामला है। उत्पाद वास्तुकला को परिभाषित करता है।

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


बंडल का निरंतर पृथक्करण

उसके बाद, बंडल का आकार केवल 38 Kb था। और मैं आपको याद दिलाता हूं कि हमने 190 Kb से शुरुआत की थी। बंडल के आकार में 80% की कमी है। और वैसे, मैं पहले से ही कोड अलगाव के लिए अन्य संभावनाएं देखता हूं। मैं बंडल के अनुकूलन को जारी रखने के लिए इंतजार नहीं कर सकता।

परिणाम

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

प्रिय पाठकों! क्या आप अपने वेब एप्लिकेशन की लोडिंग को गति देने के लिए कोड विभाजन का उपयोग करते हैं?