मॉड्यूल पहले से लोड करें

Sérgio Gomes
X

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

हालांकि, मॉड्यूल डिपेंडेंसी के कारण लोड होने में समस्या आती है, ताकि ब्राउज़र को किसी मॉड्यूल के लोड होने का इंतज़ार करें, ताकि यह पता चल पाए कि उसकी डिपेंडेंसी क्या है. एकतरफ़ा में डिपेंडेंसी को पहले से लोड किया जाता है. इससे ब्राउज़र, सभी फ़ाइलों को समय से पहले अपलोड कर दें और कनेक्शन व्यस्त रख सकें.

<link rel="preload"> यह पहले से ही एलान करके, संसाधनों के लिए अनुरोध करने का एक तरीका है. इससे पहले कि ब्राउज़र को उनकी ज़रूरत हो.

<head>
  <link rel="preload" as="style" href="critical-styles.css">
  <link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2">
</head>

ब्राउज़र सहायता

  • Chrome: 50. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: ≤79. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 85. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 11.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

<script> और <link> टैग के लिए, crossorigin के साथ क्रेडेंशियल मोड सेट किया जा सकता है एट्रिब्यूट की वैल्यू सबमिट करें. हालांकि, पता चला है कि एक <script type="module"> crossorigin एट्रिब्यूट, omit के क्रेडेंशियल मोड के बारे में बताता है, जो मौजूद नहीं है <link rel="preload"> के लिए. इसका मतलब है कि आपको अपने <script> और <link>, दोनों में crossorigin एट्रिब्यूट को बदलकर एक करें में बदल सकते हैं और हो सकता है कि आपके पास ऐसा करने का आसान तरीका न हो, अगर आप पहले से लोड करने की कोशिश करना, अन्य मॉड्यूल पर निर्भर करता है.

इसके अलावा, कोड चलाने का सिर्फ़ पहला चरण है, फ़ाइल को फ़ेच करना. सबसे पहले, ब्राउज़र को इसे पार्स और कंपाइल करना होता है. आम तौर पर, यह समय से पहले भी हो जाना चाहिए, ताकि जब मॉड्यूल की ज़रूरत हो, तो कोड चलने के लिए तैयार है. हालांकि, V8 (Chrome का JavaScript इंजन) मॉड्यूल को पार्स और कंपाइल करता है यह अन्य JavaScript से अलग होता है. <link rel="preload"> के पास यह काम नहीं करता यह बताने का कोई भी तरीका बताएं कि लोड की जा रही फ़ाइल एक मॉड्यूल है, इसलिए सभी ब्राउज़र फ़ाइल लोड करके कैश मेमोरी में सेव किया जा सकता है. जब स्क्रिप्ट को लोड करने के लिए, <script type="module"> टैग (या जब इसे किसी दूसरे मॉड्यूल से लोड किया गया हो), तो ब्राउज़र पार्स करता है और कोड को एक JavaScript मॉड्यूल के रूप में कंपाइल करता है.

कम शब्दों में कहें, तो हां. मॉड्यूल पहले से लोड करने के लिए, खास link टाइप की मदद से, हम ये काम कर सकते हैं हम किस क्रेडेंशियल मोड का इस्तेमाल कर रहे हैं, इसकी चिंता किए बिना एक साधारण एचटीएमएल लिखना. कॉन्टेंट बनाने डिफ़ॉल्ट रूप से काम करते हैं.

<head>
  <link rel="modulepreload" href="super-critical-stuff.mjs">
</head>
[...]
<script type="module" src="super-critical-stuff.mjs">

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

ब्राउज़र सहायता

  • Chrome: 66. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: ≤79. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 115. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 17. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

लेकिन मॉड्यूल का क्या निर्भरता?

मजाकिया आपको पूछना चाहिए! ऐसा भी है जो इस लेख में शामिल नहीं है: बार-बार होने वाला.

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

इसलिए, किसी मॉड्यूल और उसके यूआरएल को पहले से लोड करने के लिए, सबसे अच्छा क्रॉस-ब्राउज़र समाधान क्या होगा डिपेंडेंसी ट्री, क्योंकि ऐप्लिकेशन चलाने के लिए आपको पूरे डिपेंडेंसी ट्री की ज़रूरत होगी?

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

<head>
  <!-- dog.js imports dog-head.js, which in turn imports
       dog-head-mouth.js, which imports dog-head-mouth-tongue.js. -->
  <link rel="modulepreload" href="dog-head-mouth-tongue.mjs">
  <link rel="modulepreload" href="dog-head-mouth.mjs">
  <link rel="modulepreload" href="dog-head.mjs">
  <link rel="modulepreload" href="dog.mjs">
</head>

क्या पहले से लोड किए जाने वाले मॉड्यूल से परफ़ॉर्मेंस बेहतर होती है?

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

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