🤟 🤛🏻 💽 9 Vue प्रदर्शन युक्तियाँ 🅱️ 🕵🏼 ❇️

इस लेख में आपके Vue एप्लिकेशन के प्रदर्शन को बेहतर बनाने, प्रदर्शन गति बढ़ाने और बंडल के आकार को कम करने के नौ सुझाव दिए गए हैं।

घटकों के साथ काम करें

कार्यात्मक घटक

मान लीजिए हमारे पास एक सरल, छोटा घटक है। वह जो कुछ भी करता है वह पारित किए गए मूल्य के आधार पर एक विशेष टैग प्रदर्शित करता है:

<template> <div> <div v-if="value"></div> <section v-else></section> </div> </template> <script> export default { props: ['value'] } </script>

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

 <template functional> <div> <div v-if="props.value"></div> <section v-else></section> </div> </template> <script> export default { props: ['value'] } </script>

Vue v3.0 में कौन से कार्यात्मक घटक दिख सकते हैं, इसका एक उदाहरण

बाल घटकों में अलगाव

एक घटक की कल्पना करें जिसे आपको कुछ जटिल कार्य करने की आवश्यकता है:

 <template> <div :style="{ opacity: number / 300 }"> <div>{{ heavy() }}</div> </div> </template> <script> export default { props: ['number'], methods: { heavy () { /*   */ } } } </script>

यहाँ समस्या यह है कि Vue हर बार घटक को फिर से प्रस्तुत करने वाले भारी () विधि को निष्पादित करेगा, अर्थात, हर बार जब प्रॉम्प्स मूल्य बदलता है।

हम इस तरह के एक घटक को आसानी से अनुकूलित कर सकते हैं यदि हम भारी विधि को एक बाल घटक में अलग करते हैं:

 <template> <div :style="{ opacity: number / 300 }"> <ChildComp/> </div> </template> <script> export default { props: ['number'], components: { ChildComp: { methods: { heavy () { /*   */ } }, render (h) { return h('div', this.heavy()) } } } } </script>

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

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

गेट्टर लोकल कैश

निम्नलिखित घटक में दूसरी गणना की गई संपत्ति के आधार पर कुछ प्रकार की गणना की गई संपत्ति है:

 <template> <div :style="{ opacity: start / 300 }">{{ result }}</div> </template> <script> export default { props: ['start'], computed: { base () { return 42 }, result () { let result = this.start for (let i = 0; i < 1000; i++) { result += this.base } return result } } } </script>

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

इसे ठीक करने के लिए, बस एक बार आधार तक पहुँचने और एक स्थानीय वैरिएबल पर मान को बचाने के लिए:

 <template> <div :style="{ opacity: start / 300 }">{{ result }}</div> </template> <script> export default { props: ['start'], computed: { base () { return 42 }, result () { const base = this.base // <-- let result = this.start for (let i = 0; i < 1000; i++) { result += base } return result } } } </script>

वी-शो के साथ पुन: उपयोग करना डोम

निम्नलिखित उदाहरण पर एक नज़र डालें:

 <template functional> <div> <div v-if="props.value"> <Heavy :n="10000"/> </div> <section v-else> <Heavy :n="10000"/> </section> </div> </template>

यहां हमारे पास एक आवरण घटक है जो कुछ बाल घटकों को स्विच करने के लिए v-if और v- का उपयोग करता है।

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

अधिक उत्पादक समाधान - वी-शो का उपयोग करें

 <template functional> <div> <div v-show="props.value"> <Heavy :n="10000"/> </div> <section v-show="!props.value"> <Heavy :n="10000"/> </section> </div> </template>

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

उपयोग <रखने-जीवित>

तो, एक साधारण घटक एक राउटर के ऊपर एक आवरण घटक है।

 <template> <div id="app"> <router-view/> </div> </template>

समस्या पिछले उदाहरण के समान है - आपके राउटर के सभी घटकों को मार्गों के बीच संक्रमण के दौरान बनाया, माउंट और नष्ट किया जाएगा।

और यहाँ समाधान समान है - Vue को नष्ट करने के लिए नहीं बल्कि कैश और पुन: उपयोग घटकों को बताने के लिए। आप इसका उपयोग विशेष अंतर्निहित <रख-जीवित> घटक के साथ कर सकते हैं:

 <template> <div id="app"> <keep-alive> <router-view/> </keep-alive> </div> </template>

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

 <template> <div id="app"> <keep-alive include="home,some-popular-page"> <router-view/> </keep-alive> </div> </template>

आस्थगित प्रतिपादन

निम्नलिखित उदाहरण एक घटक है जिसमें कई बहुत भारी बाल घटक हैं:

 <template> <div> <h3>I'm an heavy page</h3> <Heavy v-for="n in 10" :key="n"/> <Heavy class="super-heavy" :n="9999999"/> </div> </template>

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

आप बाल घटकों के प्रतिपादन में देरी करके स्थिति में सुधार कर सकते हैं:

 <template> <div> <h3>I'm an heavy page</h3> <template v-if="defer(2)"> <Heavy v-for="n in 10" :key="n"/> </template> <Heavy v-if="defer(3)" class="super-heavy" :n="9999999"/> </div> </template> <script> import Defer from '@/mixins/Defer' export default { mixins: [ Defer() ] } </script>

यहाँ, defer (n) फ़ंक्शन गलत n फ़्रेम देता है। जिसके बाद यह हमेशा सच हो जाता है। इसका उपयोग टेम्पलेट के भाग के प्रसंस्करण को कई फ़्रेमों द्वारा स्थगित करने के लिए किया जाता है, जिससे ब्राउज़र को इंटरफ़ेस खींचने की क्षमता मिलती है।

यह कैसे काम करता है? जैसा कि मैंने ऊपर लिखा है, यदि v-if निर्देश में स्थिति गलत है, तो Vue टेम्पलेट के भाग को पूरी तरह से अनदेखा कर देता है।

एनीमेशन के पहले फ्रेम में हम मिलते हैं:

 <template> <div> <h3>I'm an heavy page</h3> <template v-if="false"> <Heavy v-for="n in 10" :key="n"/> </template> <Heavy v-if="false" class="super-heavy" :n="9999999"/> </div> </template>

Vue बस हेडर को माउंट करता है, और ब्राउज़र इसे प्रदर्शित करता है और एक दूसरे फ्रेम का अनुरोध करता है। इस बिंदु पर, डेफर (2) सच लौटना शुरू कर देगा

 <template> <div> <h3>I'm an heavy page</h3> <template v-if="true"> <Heavy v-for="n in 10" :key="n"/> </template> <Heavy v-if="false" class="super-heavy" :n="9999999"/> </div> </template>

Vue 10 बाल घटक बनाएगा और उन्हें माउंट करेगा। ब्राउज़र उन्हें प्रदर्शित करेगा और अगले फ्रेम का अनुरोध करेगा, जिस पर defer (3) सही लौटेगा।

इस प्रकार, हमने एक भारी घटक बनाया है जो धीरे-धीरे संसाधित होता है, जिससे ब्राउज़र को टेम्पलेट के पहले से ही माउंट किए गए भागों को प्रदर्शित करने की क्षमता मिलती है, जो कि यूएक्स में बहुत सुधार करेगा क्योंकि इंटरफ़ेस एक हैंग की तरह नहीं दिखेगा।

मिक्सर डिफर कोड:

 export default function (count = 10) { return { data () { return { displayPriority: 0 } }, mounted () { this.runDisplayPriority() }, methods: { runDisplayPriority () { const step = () => { requestAnimationFrame(() => { this.displayPriority++ if (this.displayPriority < count) { step() } }) } step() }, defer (priority) { return this.displayPriority >= priority } } } }

आलसी घटक लोड हो रहा है

अब बात करते हैं बाल घटकों के आयात की:

 import Heavy from 'Heavy.js' export default { components: { Heavy } }

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

हालांकि, यदि आपका बच्चा घटक बहुत बड़ा है, तो इसे अतुल्यकालिक रूप से लोड करने के लिए समझ में आता है।
यह करना बहुत आसान है:

 const Heavy = () => import('Heavy.js') export default { components: { Heavy } }

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

यदि आप कलेक्टर का उपयोग करते हैं, तो Heavy.js के बारे में सब कुछ एक अलग फ़ाइल में निकाला जाएगा। इस प्रकार, आप प्रारंभिक डाउनलोड के दौरान फ़ाइलों का वजन कम कर देंगे और प्रदर्शन की गति बढ़ा देंगे।

आलसी लोडिंग दृश्य

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

 const Home = () => import('Home.js') const About = () => import('About.js') const Contacts = () => import('Contacts.js') new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contacts', component: Contacts }, ] })

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

गतिशील घटक

इसी तरह, आप आसानी से गतिशील घटकों के साथ आलसी लोडिंग का उपयोग कर सकते हैं:

 <template> <div> <component :is="componentToShow"/> </div> </template> <script> export default { props: ['value'], computed: { componentToShow() { if (this.value) { return () => import('TrueComponent.js') } return () => import('FalseComponent.js') } } } </script>

फिर, प्रत्येक घटक केवल तभी लोड होगा जब इसकी आवश्यकता होगी।

Vuex के साथ काम करें

बड़े कामों से बचें

कल्पना करें कि आपको भंडारण में डेटा की एक बड़ी सरणी को संग्रहीत करने की आवश्यकता है:

 fetchItems ({ commit }, { items }) { commit('clearItems') commit('addItems', items) //   10000  }

समस्या यह है। सभी आवागमन समकालिक संचालन हैं। इसका मतलब है कि बड़े सरणी को संसाधित करना आपके इंटरफ़ेस को कार्य की अवधि के लिए अवरुद्ध करेगा।

इस समस्या को हल करने के लिए, आप सरणी को भागों में विभाजित कर सकते हैं और उन्हें एक बार में जोड़ सकते हैं, जिससे ब्राउज़र को एक नया फ्रेम खींचने का समय मिल सकता है:

 fetchItems ({ commit }, { items, splitCount }) { commit('clearItems') const queue = new JobQueue() splitArray(items, splitCount).forEach( chunk => queue.addJob(done => { //       requestAnimationFrame(() => { commit('addItems', chunk) done() }) }) ) //      await queue.start() }

आप जिस छोटी पार्टियों में स्टोरेज के लिए डेटा जोड़ते हैं, आपका इंटरफ़ेस उतना ही स्मूथ रहेगा और कार्य को पूरा करने में कुल समय लंबा होगा।

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

प्रतिक्रियाशीलता को बंद करें जहां इसकी आवश्यकता नहीं है

और आज के लिए अंतिम उदाहरण। हमारे पास एक समान कार्य है: हम घोंसले के स्तर के झुंड के साथ भंडारण में बहुत बड़ी वस्तुओं की एक सरणी जोड़ते हैं:

 const data = items.map( item => ({ id: uid++, data: item, // <--    vote: 0 }) )

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

यदि आपका एप्लिकेशन इस तरह से बनाया गया है कि यह केवल शीर्ष-स्तरीय ऑब्जेक्ट पर निर्भर करता है और नीचे दिए गए कई स्तरों पर प्रतिक्रियाशील डेटा को संदर्भित नहीं करता है, तो आप प्रतिक्रियाशीलता को अक्षम कर सकते हैं, जिससे Vue को अनावश्यक कार्य के एक समूह से बचाया जा सकता है:

 const data = items.map( item => optimizeItem(item) ) function optimizeItem (item) { const itemData = { id: uid++, vote: 0 } Object.defineProperty(itemData, 'data', { //    "-" configurable: false, value: item }) return itemData }

9 Vue प्रदर्शन युक्तियाँ