Next.js में डाइनैमिक इंपोर्ट के साथ कोड बांटना

कोड स्प्लिट करने और स्मार्ट लोडिंग की रणनीतियों की मदद से, Next.js ऐप्लिकेशन को तेज़ी से लोड करने का तरीका.

Milica Mihajlija

आप क्या सीखेंगे?

इस पोस्ट में कोड के अलग-अलग टाइप के बारे में बताया गया है बांटें और कैसे इस्तेमाल करें डाइनैमिक इंपोर्ट की सुविधा का इस्तेमाल करती हैं.

रूट और कॉम्पोनेंट के आधार पर कोड का बंटवारा

डिफ़ॉल्ट रूप से, Next.js हर रूट के लिए आपकी JavaScript को अलग-अलग हिस्सों में बांट देता है. जब उपयोगकर्ता आपका ऐप्लिकेशन लोड करते हैं, तो Next.js सिर्फ़ वही कोड भेजता है जो शुरुआती रास्ता. जब उपयोगकर्ता किसी ऐप्लिकेशन पर नेविगेट करते हैं, तो वे हिस्से फ़ेच करते हैं दूसरे रास्तों से जुड़े होते हैं. रूट के आधार पर कोड को बांटने की सुविधा, स्क्रिप्ट की संख्या जिसे एक साथ पार्स और कंपाइल करने की ज़रूरत होती है, जिससे पेज लोड होने की अवधि कम हो जाती है.

वैसे तो रूट के आधार पर कोड का बंटवारा करना एक अच्छा डिफ़ॉल्ट तरीका है, लेकिन आप कॉम्पोनेंट लेवल पर कोड को बांटने की प्रोसेस के साथ लोड होने की प्रोसेस. अगर आपके पास कॉम्पोनेंट को अलग-अलग हिस्सों में बांटना चाहिए. इस तरह, ऐसे कोई भी बड़े कॉम्पोनेंट जो ज़रूरी नहीं हैं या सिर्फ़ कुछ खास कॉम्पोनेंट पर ही रेंडर होते हैं उपयोगकर्ता के इंटरैक्शन (जैसे, बटन पर क्लिक करना) लेज़ी लोड हो सकते हैं.

Next.js, डाइनैमिक import() के साथ काम करता है, इसकी मदद से, JavaScript मॉड्यूल इंपोर्ट किए जा सकते हैं. इन मॉड्यूल में, React के कॉम्पोनेंट भी शामिल हैं. साथ ही, हर इंपोर्ट को एक अलग डेटा ग्रुप के तौर पर लोड करें. इससे आपको यह कॉम्पोनेंट लेवल पर कोड को बांटना होता है. इससे रिसॉर्स लोड होने की प्रोसेस को कंट्रोल किया जा सकता है कि उपयोगकर्ता सिर्फ़ उस साइट के लिए कोड डाउनलोड करें जिसकी उन्हें ज़रूरत है वे देख रहे हैं. Next.js में ये कॉम्पोनेंट सर्वर-साइड रेंडर किए जाते हैं (SSR) डिफ़ॉल्ट रूप से.

डाइनैमिक इंपोर्ट का इस्तेमाल

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

ऐप्लिकेशन के पहले वर्शन में बताया गया है कि पिल्ला components/Puppy.js में रहता है. यहां की यात्रा पर हूं पेज पर पपी दिखाएं, तो ऐप्लिकेशन Puppy कॉम्पोनेंट को स्टैटिक इंपोर्ट स्टेटमेंट के साथ index.js:

import Puppy from "../components/Puppy";

यह देखने के लिए कि Next.js ऐप्लिकेशन को कैसे बंडल करता है, DevTools में नेटवर्क ट्रेस की जांच करें:

1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन .

2. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.

3. नेटवर्क टैब पर क्लिक करें.

4. कैश मेमोरी बंद करें चेकबॉक्स चुनें.

5. पेज को फिर से लोड करें.

पेज लोड करने पर, सभी ज़रूरी कोड, जिनमें Puppy.js भी शामिल है इस कॉम्पोनेंट को index.js में बंडल किया गया है:

जब आप क्लिक करें बटन दबाते हैं, तो केवल पिल्ले के लिए JPEG अनुरोध ही होता है को नेटवर्क टैब में जोड़ा गया:

इस तरीके का नकारात्मक पहलू यह है कि भले ही उपयोगकर्ता पिल्ले को देखें, तो उन्हें Puppy कॉम्पोनेंट लोड करना होगा, क्योंकि यह कॉम्पोनेंट में शामिल है index.js. इस छोटे से उदाहरण में, यह कोई बड़ी बात नहीं है, लेकिन असल दुनिया में यह कोई बड़ी बात नहीं है बड़े कॉम्पोनेंट को लोड करना बहुत ज़्यादा खास होता है. हालांकि, ऐसा सिर्फ़ तब होता है, जब ज़रूरी है.

अब ऐप्लिकेशन का दूसरा वर्शन देखें, जिसमें स्टैटिक इंपोर्ट को डाइनैमिक इंपोर्ट से बदला गया. Next.js में next/dynamic शामिल है, जो इसे अगले पेज में किसी भी कॉम्पोनेंट के लिए डाइनैमिक इंपोर्ट का इस्तेमाल किया जा सकता है:

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:

1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन .

2. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.

3. नेटवर्क टैब पर क्लिक करें.

4. कैश मेमोरी बंद करें चेकबॉक्स चुनें.

5. थ्रॉटलिंग ड्रॉप-डाउन सूची में से, फ़ास्ट 3G चुनें.

6. मुझे क्लिक करें बटन दबाएं.

अब इस बटन पर क्लिक करने से, कॉम्पोनेंट और ऐप्लिकेशन को लोड होने में कुछ समय लगता है "लोड हो रहा है..." दिखाता है इस दौरान आपका मैसेज दिख रहा है.

एसएसआर के बिना डाइनैमिक इंपोर्ट

अगर आपको किसी कॉम्पोनेंट को सिर्फ़ क्लाइंट साइड पर रेंडर करना है (उदाहरण के लिए, चैट विजेट) से कोई फ़र्क़ नहीं पड़ता है, तो ssr विकल्प को false पर सेट करके ऐसा किया जा सकता है:

const Puppy = dynamic(() => import("../components/Puppy"), {
  ssr: false,
});

नतीजा

डाइनैमिक इंपोर्ट के साथ काम करने से, Next.js आपको कॉम्पोनेंट-लेवल का कोड देता है अलग-अलग हिस्सों में बांटें. इससे आपके JavaScript पेलोड को कम किया जा सकता है और ऐप्लिकेशन को बेहतर बनाया जा सकता है लोड होने में लगने वाला समय तय करें. सभी कॉम्पोनेंट, डिफ़ॉल्ट रूप से सर्वर साइड पर रेंडर होते हैं. इस विकल्प को ज़रूरत पड़ने पर बंद कर दें.