ज़्यादातर वेब पेज और ऐप्लिकेशन कई अलग-अलग हिस्सों से बने होते हैं. पहला पेज लोड होते ही ऐप्लिकेशन बनाने वाला पूरा JavaScript भेजने के बजाय, JavaScript को कई हिस्सों में बांटने से पेज की परफ़ॉर्मेंस बेहतर होती है.
इस कोडलैब से पता चलता है कि तीन संख्याओं को क्रम से लगाने वाले एक आसान ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाने के लिए, कोड को अलग-अलग हिस्सों में बांटने का कैसे इस्तेमाल किया जा सकता है.
दूरी मापें
हमेशा की तरह, कोई ऑप्टिमाइज़ेशन जोड़ने से पहले, यह मापना ज़रूरी है कि कोई वेबसाइट कैसा परफ़ॉर्म कर रही है.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं. - DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- नेटवर्क टैब पर क्लिक करें.
- कैश मेमोरी बंद करें चेकबॉक्स चुनें.
- ऐप्लिकेशन को फिर से लोड करें.
71.2 KB की JavaScript वैल्यू को किसी आसान ऐप्लिकेशन में कुछ संख्याओं को क्रम से लगाने के लिए इस्तेमाल किया जा सकता है. क्या देता है?
सोर्स कोड (src/index.js) में, lodash लाइब्रेरी इंपोर्ट की जाती है और इसका इस्तेमाल इस ऐप्लिकेशन में किया जाता है. Lodash कई उपयोगी यूटिलिटी फ़ंक्शन उपलब्ध कराता है, लेकिन यहां पैकेज में से सिर्फ़ एक तरीके का इस्तेमाल किया जा रहा है.
तीसरे पक्ष की पूरी डिपेंडेंसी को इंस्टॉल और इंपोर्ट करना, आम गलती होती है. ऐसा तब होता है, जब उसके सिर्फ़ एक छोटे हिस्से का इस्तेमाल किया जा रहा हो.
Optimize
बंडल के साइज़ में काट-छांट करने के कुछ तरीके यहां दिए गए हैं:
- तीसरे पक्ष की लाइब्रेरी इंपोर्ट करने के बजाय, क्रम से लगाने का पसंद के मुताबिक तरीका लिखना
- अंकों के हिसाब से क्रम से लगाने के लिए, पहले से मौजूद
Array.prototype.sort()तरीके का इस्तेमाल करें - पूरी लाइब्रेरी को छोड़कर, सिर्फ़
lodashसेsortByतरीके को इंपोर्ट करें - जब उपयोगकर्ता बटन पर क्लिक करता है, सिर्फ़ तब क्रम से लगाने के लिए कोड डाउनलोड करें
बंडल का साइज़ कम करने के लिए, विकल्प 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 खोलें. साथ ही, एक बार फिर से नेटवर्क पैनल पर नज़र डालें.
इस ऐप्लिकेशन के लिए, बंडल के साइज़ को बहुत कम मेहनत में 4X से भी कम किया गया है, लेकिन इसमें अब भी सुधार की गुंजाइश है.
कोड विभाजन
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 प्रोसेस के तीसरे चरण में है) का हिस्सा है, ताकि मॉड्यूल को डाइनैमिक तौर पर इंपोर्ट करने की सुविधा दी जा सके. वेबपैक में पहले से ही इसके लिए सहायता दी जा चुकी है और प्रस्ताव में बताए गए सिंटैक्स का ही इस्तेमाल किया गया है.
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 फ़्रेमवर्क के साथ लेज़ी लोडिंग
वेबपैक का इस्तेमाल करने वाले कई लोकप्रिय फ़्रेमवर्क और लाइब्रेरी, ऐब्स्ट्रैक्टेशन उपलब्ध कराती हैं. इससे आपके ऐप्लिकेशन के बीच में डाइनैमिक इंपोर्ट के बजाय, लेज़ी लोडिंग की सुविधा को इस्तेमाल करने में आसानी होती है.
हालांकि, डाइनैमिक इंपोर्ट के काम करने के तरीके को समझना मददगार होता है, लेकिन किसी मॉड्यूल को लेज़ी लोड करने के लिए, हमेशा अपने फ़्रेमवर्क/लाइब्रेरी के सुझाए गए तरीके का इस्तेमाल करें.
पहले से लोड करना और प्रीफ़ेच करना
जहां भी हो सके, ब्राउज़र से मिलने वाले संकेतों, जैसे कि <link rel="preload"> या <link rel="prefetch"> की मदद से ज़रूरी मॉड्यूल को जल्द से जल्द लोड करने की कोशिश करें. वेबपैक इंपोर्ट स्टेटमेंट में, मैजिक कॉमेंट की मदद से दोनों संकेतों का इस्तेमाल करता है. इस बारे में, क्रिटिकल हिस्सों को पहले से लोड करने की गाइड में ज़्यादा जानकारी दी गई है.
कोड से ज़्यादा लेज़ी लोडिंग
इमेज किसी ऐप्लिकेशन का अहम हिस्सा हो सकती हैं. वेबसाइट में फ़ोल्ड के नीचे या डिवाइस के व्यूपोर्ट के बाहर लोड होने वाली लेज़ी लोडिंग से वेबसाइट की स्पीड बढ़ सकती है. लेज़ीसाइज़ गाइड में इसके बारे में ज़्यादा पढ़ें.