कोड-स्प्लिट JavaScript

बड़े JavaScript संसाधनों को लोड करने से पेज स्पीड पर काफ़ी असर पड़ता है. विभाजन आपकी JavaScript को छोटे-छोटे टुकड़ों में बनाना और केवल उन्हीं चीज़ों को डाउनलोड करना, जो आपके लिए ज़रूरी है स्टार्टअप के दौरान काम करने वाला पेज, आपके पेज के लोड में काफ़ी सुधार कर सकता है रिस्पॉन्सिवनेस, जिससे आपके पेज का अगले के लिए इंटरैक्शन' बेहतर हो सकता है पेंट (INP).

जब कोई पेज बड़ी JavaScript फ़ाइलों को डाउनलोड, पार्स, और कंपाइल करता है, तो वह कुछ समय के लिए प्रतिक्रिया नहीं देता. पेज के एलिमेंट दिखते हैं, क्योंकि वे का हिस्सा है और सीएसएस के हिसाब से स्टाइल किया गया है. हालांकि, क्योंकि JavaScript की ज़रूरत पड़ेगी, ताकि उन इंटरैक्टिव एलिमेंट के साथ-साथ इनके लोड होने वाली अन्य स्क्रिप्ट को बेहतर बनाया जा सके पेज—हो सकता है कि वे JavaScript को पार्स और एक्ज़ीक्यूट कर रहे हों, ताकि वे काम कर सकें. कॉन्टेंट बनाने इसका नतीजा यह होता है कि उपयोगकर्ता को लग सकता है कि जैसे बहुत ज़्यादा इंटरैक्शन हुआ था या पूरी तरह से खराब हो गया हो.

ऐसा अक्सर इसलिए होता है, क्योंकि मुख्य थ्रेड को ब्लॉक किया जाता है, क्योंकि JavaScript को पार्स किया जाता है और उसे मुख्य थ्रेड पर कंपाइल किया जाता है. अगर इस प्रोसेस में बहुत ज़्यादा समय लगता है, तो हो सकता है कि पेज के एलिमेंट, उपयोगकर्ता के इनपुट के हिसाब से तेज़ी से जवाब न दें. इसके लिए एक उपाय वह सिर्फ़ उस JavaScript को लोड करना है जिसकी ज़रूरत पेज के काम करने के लिए होती है कोड नाम की तकनीक की मदद से, अन्य JavaScript को बाद में लोड करने के लिए टाल देना बांटना. यह मॉड्यूल इन दो तकनीकों में से बाद की तकनीकों पर फ़ोकस करता है.

कोड विभाजन के ज़रिए स्टार्टअप के दौरान JavaScript पार्सिंग और निष्पादन कम करें

जब JavaScript को प्रोसेस करने में दो से ज़्यादा समय लगता है, तो Lighthouse चेतावनी दिखाता है सेकंड है और 3.5 सेकंड से ज़्यादा समय में काम नहीं करता. बहुत ज़्यादा JavaScript पार्स और पूरा करने की वजह से, पेज में किसी भी पॉइंट पर समस्या आ सकती है लाइफ़साइकल, क्योंकि इसमें इंटरैक्शन के इनपुट में देरी को बढ़ाने की क्षमता होती है अगर उपयोगकर्ता पेज से इंटरैक्ट करने का समय और उस समय के साथ इंटरैक्ट करता है JavaScript को प्रोसेस और लागू करने के लिए ये थ्रेड के मुख्य टास्क हैं दौड़ने.

इसके अलावा, JavaScript का बहुत ज़्यादा इस्तेमाल करना और पार्स करना, खास तौर पर शुरुआती पेज लोड होने में समस्या होती है, क्योंकि यही पेज का वह बिंदु होता है लाइफ़साइकल के हिसाब से. इस लाइफ़साइकल में, उपयोगकर्ताओं के पेज के साथ इंटरैक्ट करने की संभावना काफ़ी ज़्यादा होती है. असल में, टोटल ब्लॉकिंग टाइम (टीबीटी)—यह एक लोड रिस्पॉन्सिनेस मेट्रिक होती है. इसका बहुत ज़्यादा असर पड़ता है INP से यह सुझाव मिलता है कि उपयोगकर्ता अक्सर बातचीत करने की कोशिश करते हैं लोड होने के दौरान किया जा सकता है.

लाइटहाउस ऑडिट, हर JavaScript फ़ाइल को लागू करने में लगने वाले समय की जानकारी देता है आपके पेज के अनुरोध काम के हैं. इससे आपको यह पता लगाने में मदद मिल सकती है कि असल में स्क्रिप्ट कोड को अलग-अलग करने के लिए इस्तेमाल हो सकती हैं. आप इसके बाद आगे बढ़ सकते हैं Chrome DevTools में कवरेज टूल का इस्तेमाल करके, यह पता लगाया जा सकता है कि साइट के किस हिस्से पेज लोड के दौरान, किसी पेज की JavaScript का इस्तेमाल नहीं किया जाता.

कोड को बांटना एक उपयोगी तकनीक है, जो किसी पेज की शुरुआती JavaScript को कम कर सकती है पेलोड. इसकी मदद से, JavaScript बंडल को दो हिस्सों में बांटा जा सकता है:

• पेज लोड होने पर JavaScript की ज़रूरत होती है, इसलिए इसे किसी दूसरे पेज पर लोड नहीं किया जा सकता समय.
• बचा हुआ JavaScript, जिसे बाद में लोड किया जा सकता है. आम तौर पर, इसे बाद में लोड किया जा सकता है वह बिंदु जहां उपयोगकर्ता दिए गए इंटरैक्टिव एलिमेंट से इंटरैक्ट करता है पेज.

डाइनैमिक import() सिंटैक्स का इस्तेमाल करके कोड को बांटा जा सकता है. यह सिंटैक्स—यह <script> एलिमेंट के उलट होता है, जो दिए गए JavaScript संसाधन का अनुरोध करता है स्टार्टअप के दौरान—किसी JavaScript संसाधन के लिए अनुरोध करता है. ऐसा पेज का लाइफ़साइकल.

document.querySelectorAll('#myForm input').addEventListener('blur', async () => {
  // Get the form validation named export from the module through destructuring:
  const { validateForm } = await import('/validate-form.mjs');

  // Validate the form:
  validateForm();
}, { once: true });

पिछले JavaScript स्निपेट में, validate-form.mjs मॉड्यूल यह है डाउनलोड, पार्स, और सिर्फ़ तब लागू किया जाता है, जब उपयोगकर्ता किसी फ़ॉर्म के किसी भी फ़ॉर्म को धुंधला करता है <input> फ़ील्ड. इस स्थिति में, JavaScript संसाधन फ़ॉर्म की पुष्टि करने वाला लॉजिक, सिर्फ़ तब ही पेज में शामिल होता है, जब यह इस्तेमाल किए जाने की संभावना ज़्यादा है.

webpack, Parcel, Rollup, और esbuild जैसे JavaScript बंडलर JavaScript बंडल को छोटे-छोटे हिस्सों में बांटने के लिए कॉन्फ़िगर किया गया आपको अपने सोर्स कोड में डाइनैमिक import() कॉल का पता चलेगा. इनमें से ज़्यादातर टूल से यह अपने आप हो जाता है, लेकिन esbuild में आपको ऑप्ट इन करना होगा ऑप्टिमाइज़ेशन.

कोड को अलग-अलग करने की सुविधा के बारे में मददगार जानकारी

कोड को बांटना, मुख्य थ्रेड के विवाद को कम करने का असरदार तरीका है शुरुआती पेज लोड के दौरान कुछ चीज़ों का ध्यान रखना ज़रूरी होता है. ताकि कोड को अलग-अलग कैटगरी में बांटने के अवसरों के लिए, अपने JavaScript सोर्स कोड का ऑडिट किया जा सके.

अगर हो सके, तो बंडलर का इस्तेमाल करें

डेवलपरों के लिए यह आम बात है कि वे डेवलपमेंट प्रोसेस है. यह डेवलपर के अनुभव को बेहतर बनाने वाला एक बेहतरीन ऐप्लिकेशन है, कोड को आसानी से पढ़ा जा सकता है और उसका रखरखाव किया जा सकता है. हालांकि, कुछ ऐसे भी हैं परफ़ॉर्मेंस से जुड़ी ऐसी विशेषताएं जो JavaScript की शिपिंग करते समय खराब हो सकती हैं के मॉड्यूल उपलब्ध हैं.

सबसे ज़रूरी बात, अपने सोर्स को प्रोसेस और ऑप्टिमाइज़ करने के लिए बंडलर का इस्तेमाल करना चाहिए जिसमें वे मॉड्यूल भी शामिल हैं जिन्हें आप कोड को बांटना चाहते हैं. बंडलर, न सिर्फ़ JavaScript सोर्स कोड में ऑप्टिमाइज़ेशन लागू करना, बल्कि ये ऐप्लिकेशन की परफ़ॉर्मेंस को ध्यान में रखते हुए काम करते हैं, जैसे कि बंडल का साइज़ कंप्रेशन रेशियो में की जाने वाली वैल्यू. बंडल के साइज़ के हिसाब से कंप्रेस करने की क्षमता बढ़ जाती है. हालांकि, बंडलर यह भी पक्का करने की कोशिश करते हैं कि बंडल इतने बड़े न हों कि उन पर वे काम करें स्क्रिप्ट मूल्यांकन की वजह से बड़े टास्क.

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

अनजाने में स्ट्रीमिंग कंपाइलेशन को बंद न करें

Chromium का V8 JavaScript इंजन आपको कई तरह के ऑप्टिमाइज़ेशन की सुविधा देता है ताकि यह पक्का किया जा सके कि आपका प्रोडक्शन JavaScript कोड बेहतर तरीके से लोड हो सके. इनमें से एक ऑप्टिमाइज़ेशन को स्ट्रीमिंग कंपाइलेशन कहा जाता है. जैसे, एचटीएमएल की इंक्रीमेंटल पार्सिंग को ब्राउज़र पर स्ट्रीम किया गया—स्ट्रीम के कई हिस्सों को कंपाइल किया गया नेटवर्क से आने वाले JavaScript का इस्तेमाल करता है.

यह पक्का करने के लिए आपके पास कई तरीके हैं कि आपकी स्ट्रीमिंग का कॉन्टेंट कंपाइलेशन हो Chromium में वेब ऐप्लिकेशन:

• JavaScript मॉड्यूल का इस्तेमाल करने से बचने के लिए, अपने प्रोडक्शन कोड को पूरी तरह से बदलें. बंडलर कंपाइलेशन टारगेट के आधार पर आपके JavaScript सोर्स कोड में बदलाव कर सकता है और टारगेट अक्सर दिए गए एनवायरमेंट के हिसाब से होता है. V8 पर स्ट्रीमिंग की सुविधा लागू होगी मॉड्यूल का इस्तेमाल न करने वाले किसी भी JavaScript कोड के साथ कंपाइल नहीं कर सकते हैं, और आप अपने JavaScript मॉड्यूल कोड को सिंटैक्स में बदलने के लिए अपना बंडलर कॉन्फ़िगर करें जो JavaScript मॉड्यूल और उनकी सुविधाओं का इस्तेमाल नहीं करते.
• अगर आपको JavaScript मॉड्यूल को प्रोडक्शन में भेजना है, तो .mjs का इस्तेमाल करें एक्सटेंशन. चाहे आपका प्रोडक्शन JavaScript, मॉड्यूल का इस्तेमाल करे या न करे, यहां आपको मॉड्यूल बनाम JavaScript का इस्तेमाल करने वाले JavaScript के लिए कोई खास content type नहीं होता किया है, तो नहीं. जहां V8 का सवाल है, वहां स्ट्रीमिंग से ऑप्ट आउट किया जा सकता है जब आप .js का इस्तेमाल करके प्रोडक्शन में JavaScript मॉड्यूल शिप करते हैं, तो उसे कंपाइलेशन कहते हैं एक्सटेंशन चुनें. अगर JavaScript मॉड्यूल के लिए .mjs एक्सटेंशन का इस्तेमाल किया जाता है, तो V8 ये काम कर सकता है पक्का करें कि मॉड्यूल-आधारित JavaScript कोड के लिए स्ट्रीमिंग कंपाइलेशन काम नहीं कर रहा है.

इन बातों की वजह से, कोड को बांटना न भूलें. कोड करें बंटवारा, उपयोगकर्ताओं के लिए शुरुआती JavaScript पेलोड को कम करने का एक असरदार तरीका है. बंडलर का इस्तेमाल करके और यह जाना कि V8 की स्ट्रीमिंग को कैसे सुरक्षित रखा जा सकता है कंपाइलेशन व्यवहार है, तो आप यह पक्का कर सकते हैं कि आपका प्रोडक्शन JavaScript कोड सबसे तेज़ है.

डाइनैमिक इंपोर्ट का डेमो

Webpack

webpack SplitChunksPlugin नाम के प्लगिन के साथ आता है. इससे आपको ये काम करने में मदद मिलती है कॉन्फ़िगर करें कि बंडलर, JavaScript फ़ाइलों को कैसे अलग-अलग करे. Webpack, इन दोनों डाइनैमिक import() और स्टैटिक import स्टेटमेंट. इसका व्यवहार SplitChunksPlugin को बदलने के लिए, chunks का विकल्प चुना जा सकता है कॉन्फ़िगरेशन:

• डिफ़ॉल्ट वैल्यू chunks: async है और यह डाइनैमिक import() कॉल के बारे में बताती है.
• chunks: initial का मतलब है, स्टैटिक import कॉल.
• chunks: all में डाइनैमिक import() और स्टैटिक इंपोर्ट, दोनों शामिल हैं. इससे आपको async और initial इंपोर्ट के बीच डेटा का हिस्सा शेयर करने के लिए.

डिफ़ॉल्ट रूप से, जब भी webpack को कोई डाइनैमिक import() स्टेटमेंट मिलता है. यह उस मॉड्यूल के लिए एक अलग हिस्सा बनाता है:

/* main.js */

// An application-specific chunk required during the initial page load:
import myFunction from './my-function.js';

myFunction('Hello world!');

// If a specific condition is met, a separate chunk is downloaded on demand,
// rather than being bundled with the initial chunk:
if (condition) {
  // Assumes top-level await is available. More info:
  // https://v8.dev/features/top-level-await
  await import('/form-validation.js');
}

पिछले कोड स्निपेट के लिए, डिफ़ॉल्ट Webpack कॉन्फ़िगरेशन के दो नतीजे मिलते हैं अलग-अलग हिस्से:

• main.js डेटा का हिस्सा—वेबपैक को initial डेटा वाले हिस्से की कैटगरी में बांटा जाता है—इसे main.js और ./my-function.js मॉड्यूल शामिल हैं.
• async वाला हिस्सा, जिसमें सिर्फ़ form-validation.js शामिल है (जिसमें फ़ाइल हैश (अगर कॉन्फ़िगर किया गया हो, तो संसाधन के नाम में). इस डेटा समूह को सिर्फ़ डाउनलोड किया गया है अगर condition, सही है.

इस कॉन्फ़िगरेशन की मदद से, form-validation.js वाले हिस्से को तब तक लोड होने से रोका जा सकता है, जब तक इसकी ज़रूरत होती है. यह स्क्रिप्ट को कम करके, लोड होने में लगने वाले समय की प्रतिक्रिया को बेहतर बना सकता है शुरुआती पेज लोड के दौरान मूल्यांकन समय. स्क्रिप्ट डाउनलोड करना और उसका आकलन करना form-validation.js हिस्से के लिए तब होता है, जब कोई खास शर्त पूरी होती है. इस मामले में, डाइनैमिक रूप से इंपोर्ट किया गया मॉड्यूल डाउनलोड किया जाता है. इसका एक उदाहरण यह हो सकता है: ऐसी स्थिति जिसमें पॉलीफ़िल को सिर्फ़ किसी खास ब्राउज़र के लिए डाउनलोड किया जाता है या—जैसे कि पहले का उदाहरण—किसी उपयोगकर्ता इंटरैक्शन के लिए इंपोर्ट किया गया मॉड्यूल ज़रूरी है.

दूसरी ओर, SplitChunksPlugin कॉन्फ़िगरेशन को बदलकर, यह बताया जा सकता है कि chunks: initial यह पक्का करता है कि कोड को सिर्फ़ शुरुआत में डेटा के हिसाब से बांटा जाए. ये हैं डेटा के हिस्से, जैसे कि स्टैटिक तौर पर इंपोर्ट किए गए या webpack के entry में मौजूद डेटा प्रॉपर्टी के लिए सबमिट किया गया है. पहले वाले उदाहरण पर नज़र डालने पर, नतीजा मिलने वाला हिस्सा form-validation.js और main.js का एक ही स्क्रिप्ट फ़ाइल में संयोजन, जिससे शुरुआती पेज लोडिंग की परफ़ॉर्मेंस खराब हो सकती है.

SplitChunksPlugin के विकल्पों को, इमेज के बड़े हिस्से को अलग करने के लिए भी कॉन्फ़िगर किया जा सकता है एक से ज़्यादा छोटी स्क्रिप्ट में बदलना—उदाहरण के लिए, maxSize विकल्प का इस्तेमाल करके का इस्तेमाल किया जा सकता है. maxSize के ज़रिए तय किया गया. बड़ी स्क्रिप्ट फ़ाइलों को छोटी फ़ाइलों में बांटने पर लोड होने में लगने वाले समय को कम करने में मदद करता है. ऐसा इसलिए, क्योंकि कुछ मामलों में सीपीयू पर आधारित स्क्रिप्ट का आकलन किया जाता है काम को छोटे-छोटे कामों में बांटा जाता है. इस वजह से, मुख्य टास्क के ब्लॉक होने की संभावना कम होती है का थ्रेड इस्तेमाल करें.

इसके अलावा, बड़ी JavaScript फ़ाइलें जनरेट करने का यह भी मतलब है कि स्क्रिप्ट कैश मेमोरी में सेव पेजों के अमान्य होने की आशंका ज़्यादा होती है. उदाहरण के लिए, अगर आप किसी बहुत ही फ़्रेमवर्क और पहले पक्ष के ऐप्लिकेशन कोड, दोनों वाली बड़ी स्क्रिप्ट बंडल को तब ही अमान्य किया जा सकता है, जब सिर्फ़ फ़्रेमवर्क अपडेट किया गया हो, लेकिन इसके और कुछ नहीं से जुड़ी समस्याओं को हल करने में मदद मिलती है.

वहीं दूसरी ओर, छोटी स्क्रिप्ट फ़ाइलें, रिटर्न की संभावना को बढ़ाती हैं विज़िटर कैश से संसाधन लेता है, जिससे पेज तेज़ी से लोड होता है बार-बार विज़िट करने की सुविधा मिलती है. हालांकि, बड़ी फ़ाइलों की तुलना में छोटी फ़ाइलों को कंप्रेस करने का कम फ़ायदा मिलता है साथ ही, बिना किसी खास जानकारी के, पेज लोड होने में नेटवर्क की दोतरफ़ा यात्रा का समय बढ़ा सकते हैं. ब्राउज़र की कैश मेमोरी. कैश मेमोरी के बीच संतुलन बनाने के लिए सावधानी बरतनी चाहिए पर असर, और स्क्रिप्ट के आकलन में लगने वाला समय शामिल है.

Webpack का डेमो

webpack SplitChunksPlugin का डेमो.

अपने ज्ञान को परखें

अगला वीडियो: इमेज और <iframe> एलिमेंट की लेज़ी लोडिंग

हालांकि यह काफ़ी महंगा प्रकार का संसाधन है, लेकिन JavaScript सिर्फ़ ऐसे संसाधन टाइप को लोड होने से रोका जा सकता है जिन्हें लोड होने से रोका जा सकता है. इमेज और <iframe> एलिमेंट विज्ञापनों पर असर पड़ सकता है. JavaScript की तरह, लेज़ी लोडिंग की वजह से, इमेज और <iframe> एलिमेंट के लोड होने में देरी हो सकती है उन्हें, जिनकी व्याख्या इस पाठ्यक्रम के अगले मॉड्यूल में की गई है.