कोड स्प्लिटिंग और स्मार्ट लोडिंग की रणनीतियों का इस्तेमाल करके, Next.js ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाने का तरीका.
पब्लिश होने की तारीख: 8 नवंबर, 2019
अलग-अलग तरह के कोड स्प्लिटिंग के बारे में जानें. साथ ही, अपने Next.js ऐप्लिकेशन की स्पीड बढ़ाने के लिए, डाइनैमिक इंपोर्ट का इस्तेमाल करने का तरीका जानें.
रूट और कॉम्पोनेंट के आधार पर कोड स्प्लिट करना
डिफ़ॉल्ट रूप से, Next.js आपकी JavaScript को हर रूट के लिए अलग-अलग हिस्सों में बांटता है. जब उपयोगकर्ता आपका ऐप्लिकेशन लोड करते हैं, तो Next.js सिर्फ़ शुरुआती रूट के लिए ज़रूरी कोड भेजता है. जब उपयोगकर्ता ऐप्लिकेशन में एक जगह से दूसरी जगह जाते हैं, तो वे अन्य रास्तों से जुड़े चंक फ़ेच करते हैं. रूट के आधार पर कोड को अलग-अलग करने से, एक बार में पार्स और कंपाइल की जाने वाली स्क्रिप्ट की मात्रा कम हो जाती है. इससे पेज लोड होने में कम समय लगता है.
रास्ते के आधार पर कोड स्प्लिटिंग एक अच्छा डिफ़ॉल्ट तरीका है. हालांकि, कॉम्पोनेंट लेवल पर कोड स्प्लिटिंग की मदद से, लोडिंग प्रोसेस को और बेहतर बनाया जा सकता है. अगर आपके ऐप्लिकेशन में बड़े कॉम्पोनेंट हैं, तो उन्हें अलग-अलग हिस्सों में बांटना एक अच्छा तरीका है. इस तरह, बड़े कॉम्पोनेंट को लेज़ी लोड किया जा सकता है. ये ऐसे कॉम्पोनेंट होते हैं जो ज़रूरी नहीं होते या सिर्फ़ कुछ उपयोगकर्ता इंटरैक्शन (जैसे, बटन पर क्लिक करना) पर रेंडर होते हैं.
Next.js, डाइनैमिक import() का इस्तेमाल करता है. इससे JavaScript मॉड्यूल (इसमें React कॉम्पोनेंट भी शामिल हैं) को डाइनैमिक तरीके से इंपोर्ट किया जा सकता है. साथ ही, हर इंपोर्ट को अलग-अलग हिस्सों में लोड किया जा सकता है. इससे आपको कॉम्पोनेंट-लेवल पर कोड स्प्लिट करने की सुविधा मिलती है. साथ ही, इससे आपको संसाधन लोड करने की प्रोसेस को कंट्रोल करने की सुविधा मिलती है. इससे उपयोगकर्ता, साइट के जिस हिस्से को देख रहे हैं उसके लिए सिर्फ़ ज़रूरी कोड डाउनलोड करते हैं. Next.js में, ये कॉम्पोनेंट डिफ़ॉल्ट रूप से सर्वर-साइड रेंडर (एसएसआर) होते हैं.
डाइनैमिक इंपोर्ट का इस्तेमाल
इस पोस्ट में, एक सैंपल ऐप्लिकेशन के कई वर्शन शामिल हैं. इसमें एक बटन वाला एक सामान्य पेज होता है. इस बटन पर क्लिक करने पर, आपको एक प्यारा पपी दिखेगा. ऐप्लिकेशन के हर वर्शन को इस्तेमाल करने के दौरान, आपको पता चलेगा कि डाइनैमिक इंपोर्ट, स्टैटिक इंपोर्ट से कैसे अलग होते हैं और इनका इस्तेमाल कैसे किया जाता है.
ऐप्लिकेशन के पहले वर्शन में, पपी components/Puppy.js में रहता है. पेज पर पपी को दिखाने के लिए, ऐप्लिकेशन Puppy कॉम्पोनेंट को index.js में इंपोर्ट करता है. इसके लिए, स्टैटिक इंपोर्ट स्टेटमेंट का इस्तेमाल किया जाता है:
import Puppy from "../components/Puppy";
यह देखने के लिए कि Next.js, ऐप्लिकेशन को कैसे बंडल करता है, DevTools में नेटवर्क ट्रेस की जांच करें:
साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
नेटवर्क टैब पर क्लिक करें.
कैश मेमोरी की सुविधा बंद करें चेकबॉक्स को चुनें.
पेज को फिर से लोड करें.
जब पेज लोड होता है, तो सभी ज़रूरी कोड, Puppy.js कॉम्पोनेंट के साथ index.js में बंडल हो जाता है:
मुझ पर क्लिक करें बटन दबाने पर, नेटवर्क टैब में सिर्फ़ पपी के जेपीईजी का अनुरोध जोड़ा जाता है:
इस तरीके का नुकसान यह है कि अगर उपयोगकर्ता पिल्ले को देखने के लिए बटन पर क्लिक नहीं करते हैं, तो भी उन्हें Puppy कॉम्पोनेंट लोड करना होगा, क्योंकि यह index.js में शामिल है. इस छोटे से उदाहरण में, यह कोई बड़ी बात नहीं है. हालांकि, असल दुनिया के ऐप्लिकेशन में, बड़े कॉम्पोनेंट को सिर्फ़ तब लोड करना अक्सर एक बड़ा सुधार होता है, जब इसकी ज़रूरत हो.
अब ऐप्लिकेशन का दूसरा वर्शन देखें. इसमें स्टैटिक इंपोर्ट को डाइनैमिक इंपोर्ट से बदल दिया गया है. Next.js में next/dynamic शामिल है. इससे Next में किसी भी कॉम्पोनेंट के लिए डाइनैमिक इंपोर्ट का इस्तेमाल किया जा सकता है:
import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";
// ...
const Puppy = dynamic(import("../components/Puppy"));
नेटवर्क ट्रेस की जांच करने के लिए, पहले उदाहरण में दिया गया तरीका अपनाएं.
ऐप्लिकेशन को पहली बार लोड करने पर, सिर्फ़ index.js डाउनलोड होता है. इस बार यह 0.5 केबी छोटा है. यह 37.9 केबी से घटकर 37.4 केबी हो गया है, क्योंकि इसमें Puppy कॉम्पोनेंट का कोड शामिल नहीं है:
Puppy कॉम्पोनेंट अब एक अलग चंक, 1.js में है. यह सिर्फ़ तब लोड होता है, जब बटन दबाया जाता है:
असल दुनिया के ऐप्लिकेशन में, कॉम्पोनेंट अक्सर बहुत बड़े होते हैं. इसलिए, उन्हें लेज़ी लोड करने से, आपके शुरुआती JavaScript पेलोड को सैकड़ों किलोबाइट तक कम किया जा सकता है.
कस्टम लोडिंग इंडिकेटर के साथ डाइनैमिक इंपोर्ट
संसाधनों को लेज़ी लोड करते समय, लोडिंग इंडिकेटर देना एक अच्छा तरीका है. इससे देरी होने पर उपयोगकर्ताओं को पता चल जाता है. Next.js में, dynamic() फ़ंक्शन में एक और आर्ग्युमेंट जोड़कर ऐसा किया जा सकता है:
const Puppy = dynamic(() => import("../components/Puppy"), {
loading: () => <p>Loading...</p>
});
लोडिंग इंडिकेटर को काम करते हुए देखने के लिए, DevTools में नेटवर्क कनेक्शन की स्पीड कम करें:
साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
नेटवर्क टैब पर क्लिक करें.
कैश मेमोरी की सुविधा बंद करें चेकबॉक्स को चुनें.
थ्रॉटलिंग ड्रॉप-डाउन सूची में, Fast 3G चुनें.
मुझ पर क्लिक करें बटन दबाएं.
अब बटन पर क्लिक करने पर, कॉम्पोनेंट लोड होने में कुछ समय लगता है. इस दौरान, ऐप्लिकेशन "लोड हो रहा है…" मैसेज दिखाता है.
एसएसआर के बिना डाइनैमिक इंपोर्ट
अगर आपको किसी कॉम्पोनेंट को सिर्फ़ क्लाइंट साइड पर रेंडर करना है (उदाहरण के लिए, चैट विजेट), तो ssr विकल्प को false पर सेट करके ऐसा किया जा सकता है:
const Puppy = dynamic(() => import("../components/Puppy"), {
ssr: false,
});
नतीजा
डाइनैमिक इंपोर्ट की सुविधा के साथ, Next.js आपको कॉम्पोनेंट-लेवल पर कोड को अलग-अलग करने की सुविधा देता है. इससे आपके JavaScript पेलोड को कम किया जा सकता है और ऐप्लिकेशन लोड होने में लगने वाले समय को बेहतर बनाया जा सकता है. सभी कॉम्पोनेंट, डिफ़ॉल्ट रूप से सर्वर-साइड पर रेंडर होते हैं. हालांकि, ज़रूरत पड़ने पर इस विकल्प को बंद किया जा सकता है.