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

Houssein Djirdeh

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

यह कोडलैब, कोड स्प्लिट करने की सुविधा का इस्तेमाल करके, तीन संख्याओं को क्रम से लगाने वाला ऐप्लिकेशन.

मापें

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

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

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

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

Optimize

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

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

विकल्प 1 और 2 बंडल का साइज़ कम करने के बिलकुल सही तरीके हैं (और जो कारगर साबित हो सकते हैं. हालांकि, वे इसका इस्तेमाल, इस ट्यूटोरियल में सीखने-सिखाने के लिए नहीं किया गया है 🚫.

दोनों विकल्प 3 और 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 खोलें, और नेटवर्क पैनल देखें एक बार फिर से.

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

कोड बांटना

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() सुविधा प्रपोज़ल (फ़िलहाल, स्टेज पर है) 30 मिनट की प्रोसेस को पूरा करने का सुझाव देते हैं. 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 का इस्तेमाल करने वाले कई लोकप्रिय फ़्रेमवर्क और लाइब्रेरी, अपनी वेबसाइट के बीच में डाइनैमिक इंपोर्ट के बजाय, लेज़ी लोडिंग को आसान बनाएं का इस्तेमाल करें.

• एंगुलर की मदद से, धीमे लोड होने वाले मॉड्यूल
• React राऊटर की मदद से कोड को बांटना
• Vue राऊटर के साथ लेज़ी लोडिंग

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

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

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

कोड से ज़्यादा लेज़ी लोडिंग

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