कोड को बांटने की सुविधा की मदद से, 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 गाइड में, इस बारे में ज़्यादा पढ़ें.