क्या आपका रिएक्ट एप्लिकेशन बहुत धीमा है या लोड होने में बहुत अधिक समय ले रहा है? यदि ऐसा है, तो हो सकता है कि आप कोड विभाजन नामक तकनीक का उपयोग करना चाहें। यह तकनीक रिएक्ट एप्लिकेशन की लोड गति और प्रदर्शन को बेहतर बनाने में बहुत प्रभावी है। लेकिन कोड विभाजन क्या है? और यह कैसे किया जाता है?

कोड विभाजन क्या है?

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

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

अपने वेब ब्राउज़र पर एक वेबपेज खोलें, और फिर DevTools खोलें (Google Chrome पर इसे खोलने के लिए आप अपने कीबोर्ड पर F12 क्लिक कर सकते हैं)। अगला, स्रोत टैब पर जाएं। वहां आपको पृष्ठ पर नेविगेट करते हुए डाउनलोड किया गया सभी कोड मिलेगा। कोड विभाजन के बिना, ब्राउज़र आपके प्रोजेक्ट की सभी फाइलों को प्रारंभिक पृष्ठ लोड पर डाउनलोड करता है। यदि इसमें बहुत सारी फाइलें हैं तो यह आपकी वेबसाइट को धीमा कर सकता है।

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

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

कोड विभाजन कार्य: गतिशील आयात का उपयोग करना

निम्नलिखित स्थिति पर विचार करें। आप चाहते हैं कि आपके होमपेज में एक बटन हो। जब आप बटन पर क्लिक करते हैं, तो आप 2 और 2 (जो 4 है) के योग को सचेत करना चाहते हैं। तो आप एक बनाएँ होम.जेएस घटक और अपने मुखपृष्ठ के दृश्य को परिभाषित करें।

इस मामले में, आपके पास दो विकल्प हैं। सबसे पहले, आप शीर्ष पर संख्याओं को जोड़ने के लिए कोड आयात कर सकते हैं होम.जेएस फ़ाइल। लेकिन यहाँ समस्या है. यदि आप फ़ंक्शन को फ़ाइल के शीर्ष पर आयात करना चाहते हैं, तो कोड तब भी लोड होगा जब आपने बटन क्लिक नहीं किया होगा। लोड करने का एक बेहतर तरीका होगा जोड़() केवल तभी काम करें जब आप बटन पर क्लिक करें।

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

निर्यातगलती करनासमारोहघर() { 
वापस करना ( 
"घर"> 
मुखपृष्ठ</h1>
 {
आयात("../sum.js")।तब((मापांक) => {
 चेतावनी(मापांक।जोड़(2, 2))
 })
 }}
 >
 दोनों संख्याओं का योग करें
 </button> 
 </div> 
 ); 
}

अब ब्राउज़र केवल डाउनलोड करेगा योग.जे.एस मॉड्यूल जब आप बटन क्लिक करते हैं। यह मुखपृष्ठ के लोडिंग समय में सुधार करता है।

कोड विभाजन घटक: React.lazy और सस्पेंस का उपयोग करना

आप का उपयोग करके रिएक्ट में घटकों को विभाजित कर सकते हैं आलसी() समारोह। कोड विभाजन करने के लिए सबसे अच्छी जगह आपके राउटर के अंदर होगी। क्योंकि यह वह जगह है जहां आप अपने एप्लिकेशन में घटकों को रूट करने के लिए मैप करते हैं। आप हमारे गाइड पर पढ़ सकते हैं रिएक्ट राउटर के साथ सिंगल-पेज ऐप कैसे बनाएं अगर आपको रिफ्रेशर की जरूरत है।

मान लीजिए कि आपके ऐप में a घर, के बारे में, और उत्पादों अवयव। जब आप पर हों घर घटक, लोड करने का कोई मतलब नहीं है के बारे में घटक या उत्पादों अवयव। इसलिए आपको उन्हें इससे अलग करने की जरूरत है घर मार्ग। निम्नलिखित कोड दर्शाता है कि इसे कैसे प्राप्त किया जाए:

सबसे पहले, आपको आवश्यक कार्यों और घटकों को से आयात करने की आवश्यकता है प्रतिक्रिया और प्रतिक्रिया-राउटर-डोम मॉड्यूल:

आयात {मार्ग, मार्ग, आउटलेट, लिंक} से"प्रतिक्रिया-राउटर-डोम";
आयात {आलसी, सस्पेंस} से"प्रतिक्रिया";

अगला, आपको घटकों को गतिशील रूप से आयात करने की आवश्यकता है आलसी() समारोह:

कॉन्स्ट घर = आलसी (() =>आयात("./घटक/होम"));
कॉन्स्ट के बारे में = आलसी (() =>आयात("./घटक/के बारे में"));
कॉन्स्ट उत्पाद = आलसी (() =>आयात("./घटक/उत्पाद"));

अगला, लेआउट (नेविगेशन मेनू) सेट करें। उपयोग घटक उस घटक को प्रस्तुत करने के लिए जो वर्तमान मार्ग से मेल खाता है (घर, के बारे में, या उत्पादों अवयव):

समारोहनवरैपर() {
वापस करना (
 <>

आप देख सकते हैं कि हम घटकों को अंदर लपेटते हैं. यह रिएक्ट को बताता है कि अंदर सब कुछ आलसी लोड होने की क्षमता है, जिसका अर्थ है कि यह तुरंत उपलब्ध नहीं हो सकता है। इस कारण से, कौतुहल घटक एक है मैदान छोड़ना संपत्ति। हमारे मामले में, मान साधारण पाठ है जो "लोड हो रहा है ..." कहता है। इसलिए जब प्रत्येक पृष्ठ को डाउनलोड किया जा रहा है, तो यह स्क्रीन पर लोड हो रहा है।

अंत में, मार्ग सेट करें:

निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (

"/" तत्व = {}>
"/" तत्व = {} />
"/ उत्पाद" तत्व = {} />
"/के बारे में" तत्व = {} />
 </Route>
 </Routes>
 );
}

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

सशर्त कोड विभाजन

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

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

यहाँ वह कोड कैसा दिखेगा:

आयात {आलसी, सस्पेंस} से"प्रतिक्रिया";
कॉन्स्ट व्यवस्थापक डेटा = आलसी (() =>आयात("./व्यवस्थापक डेटा"));
निर्यातगलती करनासमारोहघर() { 
कॉन्स्ट [isAdmin, setIsAdmin] = useState(असत्य)
वापस करना ( 

"घर"> 
मुखपृष्ठ</h1>
 सेटआईस एडमिन (पिछला => !पिछला)}>
 व्यवस्थापक को टॉगल करें
 </button> 

लोड हो रहा है...</h1>}>
 {isAdmin? <व्यवस्थापक डेटा />: <एच 2> व्यवस्थापक नहीं एच 2>} 
 </Suspense>
 </div> 
 ); 
}

अब, जब आप टॉगल बटन पर क्लिक करते हैं, व्यवस्थापक है पर सेट किया जाएगा सत्य। नतीजतन, ऐप दिखाएगा जिसे आलस्य से लोड किया जा रहा है। लेकिन अगर आप एडमिन यूजर नहीं हैं, तो ऐप कभी डाउनलोड नहीं होगा AdminData.js क्योंकि इसकी जरूरत नहीं पड़ेगी।

सशर्त कोड विभाजन उसी अवधारणा का उपयोग करता है प्रतिक्रिया में सशर्त प्रतिपादन.

उन्नत कोड विभाजन अवधारणाएँ

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

सबसे पहले, आप हुक आयात करते हैं:

आयात {उपयोगसंक्रमण} से"प्रतिक्रिया"

फिर आप हुक को बुलाते हैं, जो वापस आ जाता है लंबित है और startTransition:

कॉन्स्ट [लंबित है, प्रारंभ संक्रमण] = उपयोग संक्रमण ()

अंत में, अपने राज्य को अंदर अपडेट करने के लिए कोड को रैप करें प्रारंभ संक्रमण ():

प्रारंभसंक्रमण(() => {
 सेटआईस एडमिन ((पिछला) => !पिछला)
})

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

प्रतिक्रिया प्रदर्शन को अनुकूलित करने के अन्य तरीके

यह लेख आपके रिएक्ट एप्लिकेशन के प्रदर्शन को बेहतर बनाने के तरीके के रूप में कोड विभाजन को कवर करता है। लेकिन कई अन्य तरीके भी हैं जो आपको मजबूत एप्लिकेशन बनाने के लिए आवश्यक ज्ञान दे सकते हैं।