आपको अपने उपयोगकर्ताओं को ज़रूरत से ज़्यादा कोड कभी भी शिप नहीं करना चाहिए. इसलिए, अपने बंडलों को अलग-अलग हिस्सों में बांटें, ताकि ऐसा कभी न हो!
React.lazy तरीके से, डाइनैमिक इंपोर्ट का इस्तेमाल करके कॉम्पोनेंट लेवल पर React ऐप्लिकेशन को कोड-स्प्लिट करना आसान हो जाता है.
import React, { lazy } from 'react';
const AvatarComponent = lazy(() => import('./AvatarComponent'));
const DetailsComponent = () => (
<div>
<AvatarComponent />
</div>
)
यह जानकारी आपके काम की क्यों है?
बड़े React ऐप्लिकेशन में, आम तौर पर कई कॉम्पोनेंट, यूटिलिटी मेथड, और तीसरे पक्ष की लाइब्रेरी शामिल होती हैं. अगर किसी ऐप्लिकेशन के अलग-अलग हिस्सों को सिर्फ़ तब लोड करने की कोशिश नहीं की जाती, जब उनकी ज़रूरत होती है, तो JavaScript का एक बड़ा बंडल आपके उपयोगकर्ताओं को तब भेज दिया जाएगा, जब वे पहला पेज लोड करेंगे. इससे पेज की परफ़ॉर्मेंस पर काफ़ी असर पड़ सकता है.
React.lazy फ़ंक्शन, किसी ऐप्लिकेशन में कॉम्पोनेंट को JavaScript के अलग-अलग हिस्सों में बांटने का एक इन-बिल्ट तरीका है. इसमें बहुत कम मेहनत लगती है. इसके बाद, Suspense कॉम्पोनेंट के साथ इसका इस्तेमाल करके, लोडिंग की स्थितियों को मैनेज किया जा सकता है.
सस्पेंस
उपयोगकर्ताओं को बड़ा JavaScript पेलोड भेजने से यह समस्या होती है कि पेज को पूरी तरह से लोड होने में ज़्यादा समय लगता है. ऐसा खास तौर पर, कमज़ोर डिवाइसों और नेटवर्क कनेक्शन पर होता है. इसलिए, कोड स्प्लिटिंग और लेज़ी लोडिंग बहुत काम की होती है.
हालांकि, नेटवर्क पर कोड-स्प्लिट कॉम्पोनेंट फ़ेच करते समय, उपयोगकर्ताओं को हमेशा थोड़ी देरी का सामना करना पड़ता है. इसलिए, लोडिंग की स्थिति को दिखाना ज़रूरी है. Suspense कॉम्पोनेंट के साथ React.lazy का इस्तेमाल करने से, इस समस्या को हल करने में मदद मिलती है.
import React, { lazy, Suspense } from 'react';
const AvatarComponent = lazy(() => import('./AvatarComponent'));
const renderLoader = () => <p>Loading</p>;
const DetailsComponent = () => (
<Suspense fallback={renderLoader()}>
<AvatarComponent />
</Suspense>
)
Suspense एक fallback कॉम्पोनेंट स्वीकार करता है. इसकी मदद से, किसी भी React कॉम्पोनेंट को लोडिंग स्टेट के तौर पर दिखाया जा सकता है. यहां दिए गए उदाहरण में बताया गया है कि यह कैसे काम करता है.
अवतार सिर्फ़ तब रेंडर होता है, जब बटन पर क्लिक किया जाता है. इसके बाद, निलंबित किए गए AvatarComponent के लिए ज़रूरी कोड को वापस पाने का अनुरोध किया जाता है.
इस दौरान, फ़ॉलबैक लोडिंग कॉम्पोनेंट दिखाया जाता है.
यहां AvatarComponent बनाने वाला कोड छोटा है. इसलिए, लोडिंग स्पिनर सिर्फ़ कुछ समय के लिए दिखता है. बड़े कॉम्पोनेंट को लोड होने में ज़्यादा समय लग सकता है. खास तौर पर, कमज़ोर नेटवर्क कनेक्शन पर.
यह सुविधा कैसे काम करती है, इसे बेहतर तरीके से दिखाने के लिए:
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं. - DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- नेटवर्क टैब पर क्लिक करें.
- थ्रॉटलिंग ड्रॉपडाउन पर क्लिक करें. यह डिफ़ॉल्ट रूप से कोई थ्रॉटलिंग नहीं पर सेट होता है. तेज़ 3G को चुनें.
- ऐप्लिकेशन में मौजूद, Click Me बटन पर क्लिक करें.
अब लोड होने की जानकारी देने वाला इंडिकेटर ज़्यादा समय तक दिखेगा. ध्यान दें कि AvatarComponent बनाने वाले सभी कोड को अलग-अलग हिस्सों में फ़ेच किया जाता है.