HTML Academy · पाठ

संसाधन संकेत: modulepreload

तेज़ JavaScript प्रारंभ के लिए ES मॉड्यूल पहले से लोड करें

पाठ 4, कुल 4 में से13 चरण

संसाधन संकेत: modulepreload, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

modulepreload क्यों मौजूद है

ES मॉड्यूल एक dependency graph बनाते हैं: एक entry module दूसरे मॉड्यूल आयात करता है, जो आगे और मॉड्यूल आयात करते हैं। सहायता के बिना, ट्री का प्रत्येक स्तर पिछले स्तर के पार्स होने के बाद ही खोजा जाता है — इससे क्रमिक waterfall बनता है और लोड प्रदर्शन बहुत खराब हो जाता है।

modulepreload क्या करता है

<link rel="modulepreload" href="/app.js"> ब्राउज़र को मॉड्यूल और उससे transitively आयात किए गए मॉड्यूल तुरंत, समानांतर रूप से प्राप्त करने के लिए कहता है। जब तक <script type="module"> चलता है, तब तक पूरा graph cache में आ चुका होता है।

preload की तुलना में

preload भी फ़ाइलों को समानांतर रूप से प्राप्त करता है, लेकिन वह import statements से अनजान होता है — किसी मॉड्यूल फ़ाइल को preload करने से उसकी dependencies preload नहीं होतीं। modulepreload imports का अपने-आप अनुसरण करता है; यही इसका मुख्य उद्देश्य है।

<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>

इसे कहाँ रखें

<head> में, जितना संभव हो उतनी शुरुआत में। ब्राउज़र preload अनुरोध तुरंत शुरू कर देता है और HTML को पार्स करना जारी रखता है। दस्तावेज़ में बाद में matching <script type="module"> मिलने तक फ़ाइल मेमोरी में आ चुकी होती है।

खोज और graph का भ्रमण

ब्राउज़र import statements खोजने के लिए preloaded मॉड्यूल को पार्स करता है, फिर प्रत्येक आयात किए गए URL के लिए समानांतर fetch अनुरोध करता है और यह प्रक्रिया दोहराता है। उपयोगकर्ता को हर स्तर के लिए एक round trip की लागत चुकानी पड़ती है, लेकिन प्रत्येक स्तर के भीतर समानांतरता मिलती है, जिससे critical path बहुत छोटा हो जाता है।

Bundlers के साथ उपयोग करें

आधुनिक bundlers (Vite, Rollup, Webpack 5+) code-split chunks के लिए modulepreload tags अपने-आप बनाते हैं। स्वयं तैयार किए गए अनुप्रयोगों में build के समय import graph से इन्हें बनाएँ, ताकि मॉड्यूल जुड़ने या हटने पर सूची सही बनी रहे।

CrossOrigin संबंधी बातें

Cross-origin module preloads के लिए crossorigin="anonymous" शामिल करें। यह <script type="module"> के डिफ़ॉल्ट fetch mode से मेल खाता है और सुनिश्चित करता है कि preloaded प्रति दोबारा प्राप्त न की जाए, बल्कि उपयोग हो जाए।

ब्राउज़र समर्थन

modulepreload Chrome/Edge/Safari और हाल के Firefox में समर्थित है। पुराने Firefox में इसे चुपचाप अनदेखा कर दिया जाता है — मॉड्यूल फिर भी काम करते हैं, बस preload का लाभ नहीं मिलता। किसी polyfill की आवश्यकता नहीं है; सबसे खराब स्थिति में पुराने ब्राउज़रों पर लोडिंग थोड़ी धीमी होगी।

Graph का आकार सीमित रखें

सैकड़ों मॉड्यूल preload करने से ऐसे code पर bandwidth व्यर्थ होती है जिसे उपयोगकर्ता शायद कभी चलाए ही नहीं। केवल route-level entry chunks को preload करें, बहुत देर से lazy-load होने वाले chunks को नहीं। कम उपयोग होने वाले code paths के लिए prefetch (या मांग पर import) पर भरोसा करें।

अन्य संकेतों के साथ संयोजन

उसी head में छवियों और फ़ॉन्ट के लिए इन्हें स्वतंत्र रूप से मिलाएँ: तृतीय-पक्ष CDN के लिए preconnect, महत्वपूर्ण फ़ॉन्ट के लिए preload, entry modules के लिए modulepreload और अगले पृष्ठ की assets के लिए prefetch। ये संकेत एक-दूसरे में बाधा नहीं डालते।

सत्यापन

Network panel देखें: modulepreload के साथ दूसरे स्तर के imports entry के लगभग उसी समय शुरू होने वाले समानांतर अनुरोधों के रूप में दिखाई देते हैं। इसके बिना वे क्रमिक रूप से दिखाई देते हैं; प्रत्येक अनुरोध parent के पार्स होने के बाद ही शुरू होता है।

ज्ञान की जाँच

उसी module file को नियमित preload करने की तुलना में modulepreload ऐसा क्या करता है जो नियमित preload नहीं करता?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

modulepreload entry module और उसके imports को execution से पहले समानांतर रूप से प्राप्त करके ES module waterfall समाप्त करता है। इसे <head> की शुरुआत में रखें, build graph से बनाएँ, cross-origin मॉड्यूल के लिए crossorigin सेट करें और व्यर्थ bandwidth से बचने के लिए इसका दायरा route entry points तक सीमित रखें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “संसाधन संकेत: modulepreload” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “संसाधन संकेत: modulepreload” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“संसाधन संकेत: modulepreload” में मैं क्या सीखूँगा?

तेज़ JavaScript प्रारंभ के लिए ES मॉड्यूल पहले से लोड करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“संसाधन संकेत: modulepreload” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ