आपको जावास्क्रिप्ट कोड विभाजन के बारे में जानने की जरूरत है

Feb 2, 2026

कैसे करना है

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

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

• तेजी से, हल्का जावास्क्रिप्ट कोड कैसे करें

कोड विभाजन को क्या समस्या हल करता है?

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

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

क्रोम डेवलपर उपकरण में कोड कवरेज

अगर ऐसा लगता है कि आपके पास महंगा स्क्रिप्ट्स हैं जो बेहतर विभाजित हो सकती हैं, तो अगले टूल को देखने के लिए क्रोम डेवलपर टूल्स (देवटूल और जीटी; टॉप-राइट मेनू और जीटी; अधिक उपकरण और जीटी; कवरेज) में कोड कवरेज सुविधा है। यह मापता है कि आपके पृष्ठ में कितना अप्रयुक्त जावास्क्रिप्ट (और सीएसएस) है। प्रत्येक स्क्रिप्ट के लिए सारांशित, देवटूल 'अप्रयुक्त बाइट्स' दिखाएंगे। यह कोड है जिसे आप इसे विभाजित करने और आलसी लोडिंग पर विचार कर सकते हैं जब उपयोगकर्ता को इसकी आवश्यकता होती है।

विभिन्न प्रकार के कोड विभाजन

जब कोड विभाजित जावास्क्रिप्ट की बात आती है तो आप कुछ अलग-अलग दृष्टिकोण ले सकते हैं। आपकी साइट पर यह कितना लागू होता है, इस पर निर्भर करता है कि आप पृष्ठ / एप्लिकेशन 'तर्क' को विभाजित करना चाहते हैं या अन्य 'विक्रेताओं' से पुस्तकालय / ढांचे को विभाजित करना चाहते हैं।

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

विक्रेता कोड विभाजन: ढांचे और पुस्तकालय जिन पर आप भरोसा करते हैं (जैसे प्रतिक्रिया, कोणीय, वू या लोजैश) आपके उपयोगकर्ताओं को भेजे गए स्क्रिप्ट में बदलने की संभावना नहीं है, अक्सर आपकी साइट के लिए 'तर्क' के रूप में। आपकी साइट पर लौटने वाले उपयोगकर्ताओं के लिए कैश अमान्यता के नकारात्मक प्रभाव को कम करने के लिए, आप अपने 'विक्रेताओं' को एक अलग स्क्रिप्ट में विभाजित कर सकते हैं।

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

इस आलेख में हमारे उद्देश्यों के लिए, हम गतिशील कोड विभाजन पर ध्यान केंद्रित करेंगे।

कोड विभाजन के साथ हाथ प्राप्त करें

आइए के जावास्क्रिप्ट प्रदर्शन को अनुकूलित करें [9 7] सरल एप्लिकेशन जो तीन नंबरों को टाइप करता है

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

मापदंड प्रदर्शन

किसी भी अनुकूलन को जोड़ने का प्रयास करने से पहले, हम पहले हमारी जावास्क्रिप्ट के प्रदर्शन को मापने जा रहे हैं। चूंकि मैजिक सॉर्टर ऐप को गड़बड़ पर होस्ट किया गया है, हम इसके कोडिंग वातावरण का उपयोग करेंगे। यहां बताया गया है कि इसके बारे में कैसे:

• लाइव बटन दिखाएँ पर क्लिक करें।
• सीएमडी + विकल्प + I / CTRL + SHIFT + I दबाकर devtools खोलें।
• नेटवर्क पैनल का चयन करें।
• सुनिश्चित करें कि कैश को अक्षम किया गया है और ऐप को पुनः लोड किया गया है।

ऐसा लगता है कि यह सरल एप्लिकेशन कुछ संख्याओं के माध्यम से हल करने के लिए 71.2 केबी जावास्क्रिप्ट का उपयोग कर रहा है। यह निश्चित रूप से सही नहीं लगता है। हमारे स्रोत में src / index.js , लोजैश उपयोगिता पुस्तकालय आयात किया जाता है और हम उपयोग करते हैं इसके अनुसार क्रमबद्ध करें - हमारी संख्या को सॉर्ट करने के लिए इसकी सॉर्टिंग यूटिलिटीज में से एक। लॉश कई उपयोगी कार्यों की पेशकश करता है लेकिन ऐप केवल एक ही विधि का उपयोग करता है। यह तीसरे पक्ष की निर्भरता को स्थापित और आयात करने की एक आम गलती है जब वास्तविक तथ्य में आपको केवल इसके एक छोटे से हिस्से का उपयोग करने की आवश्यकता होती है।

अपने बंडल को अनुकूलित करें

हमारे जावास्क्रिप्ट बंडल आकार को ट्रिम करने के लिए कुछ विकल्प उपलब्ध हैं:

1. एक तीसरे पक्षी पुस्तकालय पर भरोसा करने के बजाय एक कस्टम सॉर्ट विधि लिखें।
2. प्रयोग करें Array.prototype.sort () , जो ब्राउज़र में बनाया गया है।
3. केवल आयात करें इसके अनुसार क्रमबद्ध करें पूरी पुस्तकालय के बजाय लॉश से विधि।
4. उपयोगकर्ता को इसकी आवश्यकता होने पर सॉर्ट करने के लिए केवल कोड डाउनलोड करें (जब वे एक बटन पर क्लिक करते हैं)।
[13 9]

विकल्प 1 और 2 हमारे बंडल आकार को कम करने के लिए उपयुक्त हैं - ये शायद एक वास्तविक अनुप्रयोग के लिए समझ में आता है। शिक्षण उद्देश्यों के लिए, हम कुछ अलग करने की कोशिश कर रहे हैं। विकल्प 3 और 4 एप्लिकेशन के प्रदर्शन में सुधार करने में मदद करें।

केवल उस कोड को आयात करें जो आपको चाहिए

हम केवल एकल आयात करने के लिए कुछ फ़ाइलों को संशोधित करेंगे इसके अनुसार क्रमबद्ध करें विधि हमें लोजैश से चाहिए। आइए हमारी जगह के साथ शुरू करते हैं लोटाश पर निर्भरता Package.json :

"lodash": "^4.7.0",

इसके साथ ही:

"lodash.sortby": "^4.7.0",

एसआरसी / index.js में, हम इस और अधिक विशिष्ट मॉड्यूल आयात करेंगे:

 जेएस
आयात "./style.css";
"Lodash" से _ आयात करें;
"Lodash.sortby" से सॉर्टबी आयात करें; 

इसके बाद, हम अपडेट करेंगे कि मूल्यों को कैसे क्रमबद्ध किया गया है:

 जेएस
form.addeventlistener ("जमा करें", e = & gt; {
  E.PreventDefault ();
  const मान = [input1.valueasnumber, input2.valueasnumber, inpution3.valueasnumber];
  const sortedvalues ​​= _.sortby (मान);
  कॉन्स्ट सॉर्टेडवल्यूज = सॉर्टबी (मान);
  its.innerhtml = `
    & lt; h2 & gt;
      $ {sortedvalues}
    & lt; / h2 & gt;
  `
}); 

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

जावास्क्रिप्ट कोड विभाजन

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

इस एप्लिकेशन में एकल बंडल को दो अलग-अलग स्क्रिप्ट में विभाजित किया जा सकता है:

• प्रारंभिक मार्ग बनाने वाले कोड के लिए एक जिम्मेदार है।
• एक और हमारे सॉर्टिंग कोड शामिल हैं।

गतिशील आयात का उपयोग (के साथ) आयात() कीवर्ड), मांग पर एक दूसरी स्क्रिप्ट आलसी हो सकती है। हमारे मैजिक नंबर ऐप में, स्क्रिप्ट को बनाने वाले कोड को आवश्यकतानुसार लोड किया जा सकता है जब उपयोगकर्ता बटन क्लिक करता है। हम क्रमबद्ध विधि के लिए शीर्ष-स्तरीय आयात को हटाकर शुरू करते हैं src / index.js :

 "lodash.sortby" से सॉर्टबी आयात करें; 

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

form.addeventlistener ("जमा करें", e = & gt; {
  E.PreventDefault ();
  आयात ('lodash.sortby')
    .then (मॉड्यूल = & gt; module.default)
    .then (सॉर्टिनपूट ())
    .कैच (ERR = & GT; {ALERT (ERR)});
});

यह गतिशील आयात() सुविधा जो हम उपयोग कर रहे हैं वह जावास्क्रिप्ट भाषा मानक में एक मॉड्यूल को गतिशील रूप से आयात करने की क्षमता सहित एक मानकस्ट्रैक प्रस्ताव का हिस्सा है। वेबपैक पहले से ही इस वाक्यविन्यास का समर्थन करता है। आप गतिशील आयात के तरीके के बारे में और पढ़ सकते हैं [1 9 4] इस आलेख में

।

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

एक वास्तविक उत्पादन अनुप्रयोगों में, आपको उचित रूप से गतिशील आयात त्रुटियों को संभालना चाहिए। सरल अलर्ट संदेश (यहां उपयोग की जाने वाली चीज़ों के समान) क्या उपयोग किए जाते हैं और उपयोगकर्ताओं को कुछ गलत साबित करने के लिए सर्वोत्तम उपयोगकर्ता अनुभव प्रदान नहीं कर सकते हैं।

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

आखिरी चीज जिसे हमें करने की ज़रूरत है वह लिखना है सॉर्टिनपूट हमारी फ़ाइल के अंत में विधि। यह एक समारोह को एक समारोह होना चाहिए जो आयातित विधि में लेता है lodash.sortby । नेस्टेड फ़ंक्शन तीन इनपुट मानों को सॉर्ट कर सकता है और डोम अपडेट कर सकता है:

 कॉन्स्ट सॉर्टिनपूट = () = & gt; {
  वापसी (सॉर्टबी) = & gt; {
    const मान = [
      input1.valueasnumber,
      input2.valueasnumber,
      input3.valueasnumber
    ];
    कॉन्स्ट सॉर्टेडवल्यूज = सॉर्टबी (मान);
    its.innerhtml = `
      & lt; h2 & gt;
        $ {sortedvalues}
      & lt; / h2 & gt;
    `
  };
} 

संख्याओं की निगरानी करें

अब आइए आखिरी बार एप्लिकेशन को फिर से लोड करें और नेटवर्क पैनल पर नज़दीकी नजर रखें। ऐप लोड होने पर आपको ध्यान देना चाहिए कि ऐप लोड होने पर केवल एक छोटा प्रारंभिक बंडल डाउनलोड किया जाता है। बटन के बाद इनपुट संख्याओं को सॉर्ट करने के लिए क्लिक किया गया है, सॉर्टिंग कोड युक्त स्क्रिप्ट / चंक को प्राप्त और निष्पादित किया जाता है। क्या आप देखते हैं कि संख्याएं अभी भी सॉर्ट की गई हैं क्योंकि हम उन्हें उम्मीद करेंगे?

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

एक जावास्क्रिप्ट लाइब्रेरी या ढांचे के साथ आलसी लोडिंग

कई लोकप्रिय ढांचे गतिशील आयात और वेबपैक का उपयोग करके कोड विभाजन और आलसी लोडिंग जोड़ने का समर्थन करते हैं।

यहां बताया गया है कि आप कितनी आलसी हो सकते हैं- प्रतिक्रिया का उपयोग कर एक फिल्म 'विवरण' घटक (साथ) React.Lazy () और उनकी सस्पेंस सुविधा) एक "लोडिंग ..." फ़ॉलबैक प्रदान करने के लिए जबकि घटक आलसी हो रहा है (देखें) यहां कुछ और विवरण के लिए):

 प्रतिक्रिया प्रतिक्रिया, {suspense} 'प्रतिक्रिया' से;
कॉन्स विवरण = react.lazy (() = & gt; आयात ('./ विवरण'));
समारोह ऐप () {
  वापसी (
    & lt; div & gt;
      & lt; h1 & gt; मेरी फिल्म & lt; / h1 & gt;
      & lt; सस्पेंस फॉलबैक = "लोड हो रहा है ..." & gt;
        & lt; विवरण / & gt;
      & lt; / रहस्य और जीटी;
    & lt; / div & gt;
  );
} 

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

यह लेख मूल रूप से 317 के अंक में प्रकाशित किया गया था जाल , वेब डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे अच्छी बिकने वाली पत्रिका। यहां अंक 317 खरीदें या यहां सदस्यता लें ।

संबंधित आलेख:

• 9 सबसे अच्छा जावास्क्रिप्ट ढांचे
• 15 आवश्यक जावास्क्रिप्ट उपकरण जो आपको उपयोग करना चाहिए
• 14 सर्वश्रेष्ठ जावास्क्रिप्ट एपीआई

[2 9 0]

---

कैसे करना है - सर्वाधिक लोकप्रिय लेख

फ़ोटोशॉप में मेम कैसे बनाएं

कैसे करना है Feb 2, 2026

(छवि क्रेडिट: मैट स्मिथ) [1 9] क्या आप फ़ोटोशॉप �..

---

घटक को एनिमेट करने के लिए प्रतिक्रिया वसंत का उपयोग कैसे करें

कैसे करना है Feb 2, 2026

(छवि क्रेडिट: मैट क्राउच) [1 9] प्रतिक्रिया वसं�..

---

Recreate a manga classic

कैसे करना है Feb 2, 2026

मैं बचपन से एक विशाल मंगा प्रशंसक रहा हूं और उस प्�..

---

Use WordPress as a headless CMS

कैसे करना है Feb 2, 2026

मैंने पहली बार ट्विन सिटी ड्रूपल से देखे गए एक बा�..

---

How to master creature anatomy

कैसे करना है Feb 2, 2026

जब यह आता है विश्वसनीय जीवों को चित्रित करना ..

---

How to illustrate for an event

कैसे करना है Feb 2, 2026

एक ईवेंट के लिए चित्र बनाना एक शानदार रचनात्मक चु..

---

Create a painterly feel in your digital art

कैसे करना है Feb 2, 2026

डिजिटल पेंटिंग ऐतिहासिक रूप से बहुत कृत्रिम दिख�..

---

How to create a winter environment

कैसे करना है Feb 2, 2026

इससे पहले कि मैं एक व्यक्तिगत छवि पर काम करना शुर�..

---

श्रेणियाँ

• एआई और मशीन लर्निंग
• AirPods
• वीरांगना
• अमेज़ॅन एलेक्सा और अमेज़ॅन इको
• अमेज़न एलेक्सा और अमेज़न इको
• अमेज़न आग टीवी
• अमेज़न प्रधानमंत्री वीडियो
• एंड्रॉयड
• Android फ़ोन और टेबलेट
• Android फोन और टैबलेट
• Android टीवी
• एप्पल
• Apple App स्टोर
• एप्पल HomeKit और एप्पल HomePod
• एप्पल संगीत
• एप्पल टीवी
• एप्पल घड़ी
• एप्लिकेशन और वेब Apps
• ऐप्स और वेब ऐप्स
• ऑडियो
• Chrome बुक और क्रोम ओएस
• क्रोमबुक और क्रोम ओएस
• Chromecast
• बादल और इंटरनेट
• बादल और इंटरनेट
• क्लाउड और इंटरनेट
• कंप्यूटर हार्डवेयर
• कंप्यूटर इतिहास
• गर्भनाल काटने और स्ट्रीमिंग
• कॉर्ड कटिंग और स्ट्रीमिंग
• कलह
• डिज्नी +
• DIY
• बिजली के वाहन
• EReaders
• अनिवार्य
• व्याख्यार
• फेसबुक
• जुआ
• जनरल
• Gmail
• गूगल
• गूगल सहायक और गूगल नेस्ट
• Google सहायक और Google नेस्ट
• गूगल क्रोम
• गूगल डॉक्स
• को Google डिस्क
• गूगल मैप्स
• गूगल प्ले स्टोर
• Google शीट
• Google स्लाइड
• गूगल टीवी
• हार्डवेयर
• एचबीओ मैक्स
• कैसे करना है
• Hulu
• Instagram
• इंटरनेट स्लैंग और लघुरूप
• IPhone और IPad
• Kindle
• लिनक्स
• मैक
• रखरखाव और अनुकूलन
• माइक्रोसॉफ्ट एज
• माइक्रोसॉफ्ट एक्सेल
• माइक्रोसॉफ्ट ऑफिस
• माइक्रोसॉफ्ट आउटलुक
• Microsoft PowerPoint
• ​​माइक्रोसॉफ्ट टीमें
• माइक्रोसॉफ्ट वर्ड
• मोज़िला फ़ायरफ़ॉक्स
• Netflix
• Nintendo स्विच
• पैरामाउंट +
• पीसी गेमिंग
• मयूर
• फोटोग्राफी
• फ़ोटोशॉप
• प्लेस्टेशन
• गोपनीयता और सुरक्षा
• निजता एवं सुरक्षा
• गोपनीयता और सुरक्षा
• उत्पाद मवेशियों को इकट्ठा
• प्रोग्रामिंग
• रास्पबेरी Pi
• Reddit
• Roku
• सफारी
• सैमसंग फ़ोन और टेबलेट
• सैमसंग फोन और टैबलेट
• स्लैक
• स्मार्ट होम
• Snapchat
• सामाजिक मीडिया
• अंतरिक्ष
• Spotify
• Tinder
• समस्या निवारण
• टीवी
• ट्विटर
• वीडियो गेम
• आभासी वास्तविकता
• के VPN
• वेब ब्राउज़र
• WhatsApp
• वाईफ़ाई और रूटर
• वाईफाई और राउटर
• विंडोज
• Windows 10
• विंडोज 11
• विंडोज 7
• एक्सबॉक्स
• यू ट्यूब के यूट्यूब टीवी
• YouTube और YouTube टीवी
• ज़ूम
• Explainers