कोई भी व्यक्ति इंतज़ार नहीं करता. अगर किसी वेबसाइट को लोड होने में तीन सेकंड से ज़्यादा समय लगता है, तो 50% से ज़्यादा उपयोगकर्ता उसे छोड़ देते हैं.
बड़े JavaScript पेलोड भेजने से आपकी साइट की स्पीड पर असर पड़ता है काफ़ी मदद मिली है. सभी JavaScript को अपने उपयोगकर्ता को जल्द से जल्द भेजने के बजाय तो अपने ऐप्लिकेशन का पहला पेज लोड होने के बाद, बंडल को कई हिस्सों में भेज सकते हैं और शुरू में ही ज़रूरी सूचना भेजें.
कोड को बांटना क्यों फ़ायदेमंद होता है?
कोड को बांटना एक ऐसी तकनीक है जिसमें, शुरू होने में लगने वाले समय को कम किया जाता है. जब हम स्टार्टअप पर कम JavaScript भेजते हैं, तो हम इस अहम अवधि में मुख्य थ्रेड के काम को कम करके, ऐप्लिकेशन को तेज़ी से इंटरैक्टिव बना सकते हैं.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के मामले में, स्टार्टअप के समय डाउनलोड किए गए JavaScript पेलोड को कम करने से, नेक्स्ट पेंट (आईएनपी) से जुड़े इंटरैक्शन को बेहतर बनाने में मदद मिलेगी. इसकी वजह यह है कि मुख्य थ्रेड को खाली करके, यह ऐप्लिकेशन उपयोगकर्ता के इनपुट पर ज़्यादा तेज़ी से रिस्पॉन्स दे सकता है. ऐसा, JavaScript पार्स, कंपाइल, और एक्ज़ीक्यूशन से जुड़े स्टार्टअप लागत को कम करके किया जाता है.
आपकी वेबसाइट के तरीके के आधार पर, खास तौर पर तब, जब आपकी वेबसाइट पर क्लाइंट-साइड रेंडरिंग का काफ़ी इस्तेमाल होता है, मार्कअप को रेंडर करने के लिए ज़िम्मेदार JavaScript पेलोड का साइज़ कम होने पर, सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) के समय में सुधार हो सकता है. ऐसा तब हो सकता है, जब क्लाइंट-साइड मार्कअप पूरा होने के बाद, ब्राउज़र, एलसीपी रिसॉर्स को खोजने में देरी करे या फिर एलसीपी एलिमेंट को रेंडर करने में मुख्य थ्रेड के ज़्यादा व्यस्त होने पर भी ऐसा हो सकता है. इन दोनों स्थितियों में, पेज के लिए एलसीपी समय में देरी हो सकती है.
मापें
अगर कार्रवाई करने में ज़्यादा समय लगता है, तो लाइटहाउस उस ऑडिट को नहीं दिखाता है जो प्रोसेस नहीं हो सकी एक पेज पर सभी JavaScript लागू करना चाहिए.
JavaScript बंडल को शुरुआती रूट के लिए ज़रूरी कोड भेजने के लिए अलग-अलग करें, जब उपयोगकर्ता किसी ऐप्लिकेशन को लोड करता है. इससे स्क्रिप्ट की संख्या कम हो जाती है, पार्स और कंपाइल किया जाता है, जिससे पेज लोड होने में कम समय लगता है.
लोकप्रिय मॉड्यूल बंडलर, जैसे कि webpack,
पार्सल, और
रोलअप की मदद से, अपने
डाइनैमिक इंपोर्ट का इस्तेमाल करने वाले बंडल.
उदाहरण के लिए, नीचे दिए गए कोड स्निपेट पर गौर करें. यह
someFunction तरीका, जो फ़ॉर्म सबमिट किए जाने पर सक्रिय होता है.
import moduleA from "library";
form.addEventListener("submit", e => {
e.preventDefault();
someFunction();
});
const someFunction = () => {
// uses moduleA
}
यहां someFunction किसी खास लाइब्रेरी से इंपोर्ट किए गए मॉड्यूल का इस्तेमाल करता है. अगर आपने
इस मॉड्यूल का कहीं और इस्तेमाल नहीं किया जा रहा है, तो कोड ब्लॉक को
डाइनैमिक इंपोर्ट का इस्तेमाल करें.
form.addEventListener("submit", e => {
e.preventDefault();
import('library.moduleA')
.then(module => module.default) // using the default export
.then(() => someFunction())
.catch(handleError());
});
const someFunction = () => {
// uses moduleA
}
मॉड्यूल बनाने वाला कोड शुरुआती बंडल में शामिल नहीं होता और अब इसे लेज़ी लोड किया गया है या इसे उपयोगकर्ता को सिर्फ़ तब उपलब्ध कराया गया है, जब इसकी ज़रूरत फ़ॉर्म सबमिट करना होगा. पेज की परफ़ॉर्मेंस को और बेहतर बनाने के लिए, ज़रूरी हिस्सों को पहले से लोड करें, ताकि उन्हें प्राथमिकता दी जा सके और उन्हें जल्दी फ़ेच किया जा सके.
हालांकि पिछला कोड स्निपेट एक सामान्य उदाहरण है, लेकिन लेज़ी लोडिंग तीसरे पक्ष के कोड बड़े ऐप्लिकेशन में डिपेंडेंसी का कोई आम पैटर्न नहीं है. आम तौर पर, तीसरा पार्टी डिपेंडेंसी एक अलग वेंडर बंडल में बंटी होती हैं. इन वेंडर बंडल को कैश मेमोरी में सेव किया जा सकता है क्योंकि वे अक्सर अपडेट नहीं होते हैं. जानें कि कैसे SplitChunksPlugin से ये काम किए जा सकते हैं मदद मिलती है.
जब क्लाइंट-साइड फ़्रेमवर्क का इस्तेमाल किया जाता है, तो इसे रूट या कॉम्पोनेंट के लेवल पर बांटा जाता है आपके ऐप्लिकेशन के अलग-अलग हिस्सों को लेज़ी लोड करने का आसान तरीका. कई वेबपैक का इस्तेमाल करने वाले लोकप्रिय फ़्रेमवर्क, लेज़ी लोडिंग के लिए ऐब्स्ट्रैक्ट उपलब्ध कराते हैं खुद ही कॉन्फ़िगरेशन के बारे में पता लगाने से ज़्यादा आसान है.