अपने VueJS एप्लिकेशन को तेज करने के 5 बेहद सरल तरीके

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


चुई की आवाज

मेरे बारे में थोड़ा - मेरा नाम वैभव है, मैं फाइव 2 ओ से हूँ। मैं पूरे 2 साल (1.0 की रिहाई के बाद से) VueJS में शामिल रहा हूं और मूल रूप से सिडनी में सबसे बड़े VueJS कोड बेस के 3 बनाने / प्रशिक्षित करने में मदद की है। यह कोड लाखों लोगों की सेवा करता है, इसलिए मेरा काम केवल स्केलेबल कोड पैटर्न बनाना नहीं है, बल्कि काफी हद तक इसके प्रदर्शन का ध्यान रखना भी है।

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

आइए इस बिंदु पर अधिकार प्राप्त करें - अपने VueJS एप्लिकेशन के प्रदर्शन को बेहतर बनाने के कुछ सरल तरीकों के बारे में बात करें।

नंबर एक

हम यहां जो देखते हैं वह एक "कार्यात्मक" टेम्पलेट है जिसमें कोई घोषित राज्य नहीं है और केवल प्रॉपर से संबंधित है। यह रेंडरिंग विधि का उपयोग करके Vue के आधार पर एक कार्यात्मक घटक में आसानी से बनाया जा सकता है।

https://vuejs.org/v2/guide/render-function.html

यदि आप इसे पढ़ते हैं, तो आप प्रॉपर functional: true साथ गुजरते देखेंगे functional: true
तो, इस समाधान के लिए एक सरल समाधान नीचे दिया गया है:



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

त्वरित संदर्भ: चूंकि यह एक कार्यात्मक घटक है, इसलिए इसका संदर्भ मौजूद नहीं है, इसलिए, सहारा तक पहुँचने के लिए, आपको props.name का उपयोग करना होगा - उल्लेख करने के लिए दिनेश माधललाल का धन्यवाद

दूसरा आसान तरीका

गतिशील रूप से लोड किए गए घटकों के लिए रखने-जीवित का उपयोग करना।



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

तीसरा आसान तरीका

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



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

चौथा आसान तरीका

CTA घटनाओं में अनाम कार्यों का उपयोग करना। जब भी एक अनाम फ़ंक्शन "onClick" बटन पर जाता है (मैंने रिएक्टर से आने वाले डेवलपर्स के बीच इस पैटर्न को देखा, क्योंकि यह किसी फ़ंक्शन को उपयोगकर्ता डेटा पास करने के लिए रिएक्ट का एक तरीका है), अनाम फ़ंक्शन को पास नहीं करना बेहतर है। कारण यह है।

नीचे दिए गए उदाहरण पर विचार करें:



यहां क्या होता है कि हर बार एक div लंबाई (जैसे प्रगति पट्टी) में बढ़ती है, सभी बटन भी फिर से तैयार किए जाएंगे।

तकनीकी रूप से, उन्हें नहीं करना चाहिए, क्योंकि उनमें कुछ भी नहीं बदलता है, है ना? कोई सहारा अद्यतन या डेटा अद्यतन, आदि

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

सौभाग्य से, Vue इतना अद्भुत है कि यह समझने के लिए पर्याप्त स्मार्ट है कि किसी भी फ़ंक्शन को अपने दम पर कॉल नहीं किया जाना चाहिए, जब तक कि यह आग से जुड़ी हुई घटना तक न हो, इसलिए भले ही यह IIF हो, Vue इसे थंक बनाता है। जो निष्पादन में देरी करता है।



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

मैजिक 5 आसान तरीका

यह एक बस के रूप में सरल है, इसके बारे में ग्रे क्षेत्र हैं, और यह एक सामान्य समाधान नहीं है। इस विधि का उपयोग केवल तब करें जब पृष्ठ पर कई घटक हों और घटक का प्रदर्शन स्विच करना त्वरित हो।

हां, मैं v-if या v- शो का उपयोग करने की बात कर रहा हूं। दोनों में बहुत बड़ा अंतर है। V-if = false कभी निर्देश अक्षम के साथ एक घटक प्रदान नहीं करता है। इसलिए, यदि यह घटक कम समय में कई बार स्विच करता है, तो यह प्रदर्शन को प्रभावित करेगा, इसलिए ऐसी स्थितियों में वी-शो का उपयोग करना बहुत अच्छी तरह से काम करता है।

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

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

मुझे आशा है कि यह आप सभी की मदद करता है!

यदि आपको यह पसंद आया, तो इसी तरह के विषयों के लिए सदस्यता सुनिश्चित करें:
Twitter: twitter.com/ @veebuv

यहाँ एक अनुवाद है। आपकी टिप्पणियों की प्रतीक्षा है, मित्रों।