किसी को भी इंतज़ार करना पसंद नहीं होता. अगर किसी वेबसाइट को लोड होने में तीन सेकंड से ज़्यादा समय लगता है, तो 50% से ज़्यादा लोग उसे छोड़ देते हैं.
JavaScript के बड़े पेलोड भेजने से, आपकी साइट की स्पीड पर काफ़ी असर पड़ता है. अपने ऐप्लिकेशन का पहला पेज लोड होते ही, JavaScript का पूरा पेलोड उपयोगकर्ता को भेजने के बजाय, अपने बंडल को कई हिस्सों में बांटें और शुरुआत में सिर्फ़ ज़रूरी पेलोड भेजें.
कोड स्प्लिटिंग फ़ायदेमंद क्यों है?
कोड स्प्लिटिंग एक ऐसी तकनीक है जिससे स्टार्टअप में लगने वाले समय को कम किया जा सकता है. स्टार्टअप के दौरान, कम JavaScript भेजने से, इस अहम अवधि में मुख्य थ्रेड के काम को कम किया जा सकता है. इससे ऐप्लिकेशन को तेज़ी से इंटरैक्टिव बनाया जा सकता है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के मामले में, स्टार्टअप के दौरान डाउनलोड किए गए JavaScript पेलोड को कम करने से, पेज के रिस्पॉन्स में लगने वाले समय (आईएनपी) को बेहतर बनाया जा सकता है. इसकी वजह यह है कि मुख्य थ्रेड को खाली करने से, ऐप्लिकेशन उपयोगकर्ता के इनपुट का जवाब ज़्यादा तेज़ी से दे पाता है. ऐसा इसलिए होता है, क्योंकि JavaScript को पार्स करने, कंपाइल करने, और एक्ज़ीक्यूट करने से जुड़े स्टार्टअप की लागत कम हो जाती है.
अपनी वेबसाइट के आर्किटेक्चर के हिसाब से—खास तौर पर, अगर आपकी वेबसाइट क्लाइंट-साइड रेंडरिंग पर ज़्यादा निर्भर करती है—मार्कअप रेंडर करने के लिए ज़िम्मेदार JavaScript पेलोड का साइज़ कम करने से, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) को बेहतर बनाया जा सकता है. ऐसा तब हो सकता है, जब एलसीपी रिसॉर्स को ब्राउज़र, क्लाइंट-साइड मार्कअप पूरा होने के बाद ही ढूंढ पाए. इसके अलावा, ऐसा तब भी हो सकता है, जब मुख्य थ्रेड एलसीपी एलिमेंट को रेंडर करने में बहुत व्यस्त हो. इन दोनों स्थितियों में, पेज के एलसीपी में देरी हो सकती है.
मापें
जब किसी पेज पर सभी JavaScript को एक्ज़ीक्यूट करने में ज़्यादा समय लगता है, तो Lighthouse में ऑडिट फ़ेल हो जाता है.
JavaScript बंडल को स्प्लिट करें, ताकि उपयोगकर्ता के ऐप्लिकेशन लोड करने पर, शुरुआती रूट के लिए ज़रूरी कोड ही भेजा जा सके. इससे, पार्स और कंपाइल करने के लिए ज़रूरी स्क्रिप्ट की मात्रा कम हो जाती है. इससे पेज लोड होने में कम समय लगता है.
webpack,
Parcel, और
Rollup जैसे मशहूर मॉड्यूल बंडलर, डाइनैमिक इंपोर्ट का इस्तेमाल करके, अपने बंडल को स्प्लिट करने की सुविधा देते हैं.
उदाहरण के लिए, यहां दिए गए कोड स्निपेट पर ध्यान दें. इसमें 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 आपकी मदद कैसे कर सकता है, यह लेख पढ़ें.
क्लाइंट-साइड फ़्रेमवर्क का इस्तेमाल करते समय, रूट या कॉम्पोनेंट लेवल पर स्प्लिट करना, आपके ऐप्लिकेशन के अलग-अलग हिस्सों को लेज़ी लोड करने का एक आसान तरीका है. webpack का इस्तेमाल करने वाले कई मशहूर फ़्रेमवर्क, लेज़ी लोडिंग को आसान बनाने के लिए ऐब्स्ट्रैक्शन उपलब्ध कराते हैं. इससे आपको कॉन्फ़िगरेशन में खुद से बदलाव करने की ज़रूरत नहीं पड़ती.