कोड को बांटने की सुविधा की मदद से, JavaScript के पेलोड कम करें

Houssein Djirdeh

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

इस कोडलैब में, कोड को अलग-अलग हिस्सों में बांटने का इस्तेमाल करके, तीन नंबरों को क्रम से लगाने वाले आसान ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाने का तरीका बताया गया है.

मापें

हमेशा की तरह, किसी भी ऑप्टिमाइज़ेशन को जोड़ने से पहले, यह मेज़र करना ज़रूरी है कि वेबसाइट कैसा परफ़ॉर्म करती है.

1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
2. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
3. नेटवर्क टैब पर क्लिक करें.
4. कैश मेमोरी की सुविधा बंद करें चेकबॉक्स को चुनें.
5. ऐप्लिकेशन को फिर से लोड करें.

किसी सामान्य ऐप्लिकेशन में कुछ संख्याओं को क्रम से लगाने के लिए, 71.2 केबी का JavaScript. क्या हुआ?

सोर्स कोड (src/index.js) में, lodash लाइब्रेरी को इंपोर्ट किया गया है और इस ऐप्लिकेशन में इसका इस्तेमाल किया गया है. Lodash कई काम के यूटिलिटी फ़ंक्शन उपलब्ध कराता है. हालांकि, यहां पैकेज के सिर्फ़ एक तरीके का इस्तेमाल किया जा रहा है. तीसरे पक्ष की सभी डिपेंडेंसी इंस्टॉल और इंपोर्ट करना एक आम गलती है. ऐसा तब किया जाता है, जब डिपेंडेंसी के सिर्फ़ कुछ हिस्से का इस्तेमाल किया जा रहा हो.

Optimize

बंडल के साइज़ को कम करने के कुछ तरीके यहां दिए गए हैं:

1. तीसरे पक्ष की लाइब्रेरी इंपोर्ट करने के बजाय, क्रम से लगाने का कस्टम तरीका लिखना
2. संख्या के हिसाब से क्रम से लगाने के लिए, पहले से मौजूद Array.prototype.sort() तरीके का इस्तेमाल करना
3. lodash से सिर्फ़ sortBy तरीका इंपोर्ट करें, न कि पूरी लाइब्रेरी
4. क्रम से लगाने के लिए, कोड को सिर्फ़ तब डाउनलोड करें, जब उपयोगकर्ता बटन पर क्लिक करे

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

तीसरा और चौथा विकल्प, दोनों ही इस ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाने में मदद करते हैं. इस कोडलैब के अगले कुछ सेक्शन में, इन चरणों के बारे में बताया गया है. कोडिंग के किसी भी ट्यूटोरियल की तरह, कोड को कॉपी करके चिपकाने के बजाय, हमेशा खुद लिखने की कोशिश करें.

सिर्फ़ ज़रूरी फ़ाइलें इंपोर्ट करना

lodash से सिर्फ़ एक तरीका इंपोर्ट करने के लिए, कुछ फ़ाइलों में बदलाव करना होगा. सबसे पहले, package.json में इस डिपेंडेंसी को बदलें:

"lodash": "^4.7.0",

इसकी मदद से:

"lodash.sortby": "^4.7.0",

अब src/index.js में, यह मॉड्यूल इंपोर्ट करें:

import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";

साथ ही, वैल्यू को क्रम से लगाने का तरीका अपडेट करें::

form.addEventListener("submit", e => {
  e.preventDefault();
  const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber];
  const sortedValues = _.sortBy(values);
  const sortedValues = sortBy(values);

  results.innerHTML = `
    <h2>
      ${sortedValues}
    </h2>
  `
});

ऐप्लिकेशन को फिर से लोड करें, DevTools खोलें, और नेटवर्क पैनल को फिर से देखें.

इस ऐप्लिकेशन के लिए, बंडल का साइज़ बहुत कम काम करके चार गुना से ज़्यादा कम कर दिया गया था. हालांकि, इसमें अब भी सुधार की गुंजाइश है.

कोड को अलग-अलग हिस्सों में बांटना

webpack, आज इस्तेमाल किए जा रहे सबसे लोकप्रिय ओपन-सोर्स मॉड्यूल बंडलर में से एक है. कम शब्दों में, यह वे सभी JavaScript मॉड्यूल (और अन्य ऐसेट) बंडल करता है जिनसे वेब ऐप्लिकेशन बनता है. इन मॉड्यूल को ब्राउज़र पढ़ सकता है.

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

• हमारे शुरुआती रूट को बनाने वाले कोड की ज़िम्मेदारी
• दूसरा चंक, जिसमें क्रम से लगाने का कोड होता है

डाइनैमिक इंपोर्ट का इस्तेमाल करके, सेकंडरी चंक को लोड होने में समय लग सकता है या मांग पर लोड किया जा सकता है. इस ऐप्लिकेशन में, चंक बनाने वाला कोड सिर्फ़ तब लोड किया जा सकता है, जब उपयोगकर्ता बटन दबाए.

src/index.js में, क्रम से लगाने के तरीके के लिए टॉप-लेवल इंपोर्ट हटाकर शुरुआत करें:

import sortBy from "lodash.sortby";

इसके बाद, इसे इवेंट लिसनर में इंपोर्ट करें, जो बटन दबाने पर ट्रिगर होता है:

form.addEventListener("submit", e => {
  e.preventDefault();
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

import() सुविधा, किसी मॉड्यूल को डाइनैमिक तौर पर इंपोर्ट करने की सुविधा को शामिल करने के लिए, प्रस्ताव (फ़िलहाल, TC39 प्रोसेस के तीसरे चरण में है) का हिस्सा है. webpack में पहले से ही इस सुविधा के लिए सहायता शामिल है और यह उसी सिंटैक्स का पालन करता है जिसे प्रस्ताव में बताया गया है.

import() एक प्रॉमिस दिखाता है. जब यह रिज़ॉल्व हो जाता है, तो चुना गया मॉड्यूल उपलब्ध कराया जाता है. इसे अलग-अलग चंक में बांटा जाता है. मॉड्यूल मिलने के बाद, module.default का इस्तेमाल lodash के डिफ़ॉल्ट एक्सपोर्ट का रेफ़रंस देने के लिए किया जाता है. प्रॉमिस को एक और .then के साथ चेन किया गया है, जो तीन इनपुट वैल्यू को क्रम से लगाने के लिए sortInput तरीके को कॉल करता है. प्रोमिस चेन के आखिर में, .catch() का इस्तेमाल उन मामलों को मैनेज करने के लिए किया जाता है जहां किसी गड़बड़ी की वजह से, किए गए वादे को अस्वीकार कर दिया जाता है.

आखिरी चरण में, फ़ाइल के आखिर में sortInput तरीका लिखना होता है. यह ऐसा फ़ंक्शन होना चाहिए जो lodash.sortBy से इंपोर्ट किए गए तरीके को इस्तेमाल करने वाला फ़ंक्शन दिखाता हो. इसके बाद, नेस्ट किया गया फ़ंक्शन, तीन इनपुट वैल्यू को क्रम से लगा सकता है और डीओएम को अपडेट कर सकता है.

const sortInput = () => {
  return (sortBy) => {
    const values = [
      input1.valueAsNumber,
      input2.valueAsNumber,
      input3.valueAsNumber
    ];
    const sortedValues = sortBy(values);

    results.innerHTML = `
      <h2>
        ${sortedValues}
      </h2>
    `
  };
}

निगरानी

ऐप्लिकेशन को एक बार फिर से लोड करें और नेटवर्क पैनल पर फिर से नज़र रखें. ऐप्लिकेशन डाउनलोड होने के बाद, सिर्फ़ एक छोटा शुरुआती बंडल डाउनलोड किया जाता है.

इनपुट नंबर को क्रम से लगाने के लिए बटन दबाने के बाद, क्रम से लगाने का कोड वाला चंक फ़ेच और लागू हो जाता है.

ध्यान दें कि संख्याएं अब भी क्रम से कैसे लगाई जाती हैं!

नतीजा

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

लेज़ी लोडिंग यूज़र इंटरफ़ेस (यूआई)

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

तीसरे पक्ष के नोड मॉड्यूल को लेज़ी लोड करना

अपने ऐप्लिकेशन में तीसरे पक्ष की डिपेंडेंसी को हमेशा लेज़ी लोड करना सबसे अच्छा तरीका नहीं है. यह इस बात पर निर्भर करता है कि उनका इस्तेमाल कहां किया जा रहा है. आम तौर पर, तीसरे पक्ष की डिपेंडेंसी को एक अलग vendor बंडल में बांटा जाता है. इसे कैश मेमोरी में सेव किया जा सकता है, क्योंकि ये अक्सर अपडेट नहीं होतीं. इस बारे में ज़्यादा जानें कि SplitChunksPlugin, आपको ऐसा करने में कैसे मदद कर सकता है.

JavaScript फ़्रेमवर्क की मदद से लेज़ी लोडिंग

webpack का इस्तेमाल करने वाले कई लोकप्रिय फ़्रेमवर्क और लाइब्रेरी, ऐब्स्ट्रैक्शन की सुविधा देते हैं. इससे, ऐप्लिकेशन के बीच में डाइनैमिक इंपोर्ट का इस्तेमाल करने के बजाय, लैज़ी लोडिंग को आसानी से लागू किया जा सकता है.

• Angular के साथ मॉड्यूल की लेज़ी लोडिंग
• React Router की मदद से कोड को अलग-अलग हिस्सों में बांटना
• Vue Router की मदद से लेज़ी लोडिंग

डाइनैमिक इंपोर्ट के काम करने के तरीके को समझना फ़ायदेमंद होता है. हालांकि, खास मॉड्यूल को लेज़ी लोड करने के लिए, हमेशा अपने फ़्रेमवर्क/लाइब्रेरी के सुझाए गए तरीके का इस्तेमाल करें.

पहले से लोड करना और प्रीफ़ेच करना

जहां भी हो सके, ज़रूरी मॉड्यूल को जल्द से जल्द लोड करने के लिए, <link rel="preload"> या <link rel="prefetch"> जैसे ब्राउज़र के सुझावों का फ़ायदा लें. webpack, इंपोर्ट स्टेटमेंट में मैजिक टिप्पणियों का इस्तेमाल करके, दोनों सुझावों के साथ काम करता है. इस बारे में ज़्यादा जानकारी, ज़रूरी चंक को पहले से लोड करने की गाइड में दी गई है.

कोड के अलावा, ज़्यादा कॉन्टेंट को लेज़ी लोड करना

इमेज, किसी ऐप्लिकेशन का अहम हिस्सा हो सकती हैं. फ़ोल्ड के नीचे या डिवाइस के व्यूपोर्ट के बाहर मौजूद कॉन्टेंट को धीरे-धीरे लोड करने से, वेबसाइट की स्पीड बढ़ सकती है. Lazysizes गाइड में, इस बारे में ज़्यादा पढ़ें.