React Academy · पाठ

बंडल, कैश और प्रीलोडिंग संकेत

बंडल और कैशिंग समझें: सामग्री हैश, अपरिवर्तनीय एसेट और स्विच के रूप में HTML। इंटरैक्शन को तुरंत जैसा महसूस कराने के लिए हल्की प्रीलोडिंग करें।

पाठ 3, कुल 3 में से8 चरण

बंडल, कैश और प्रीलोडिंग संकेत, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 3 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

बंडल और कैश क्यों महत्वपूर्ण हैं

लक्ष्य: छोटे बंडल उपलब्ध कराएँ और ब्राउज़र को उन्हें सुरक्षित रूप से कैश करने दें।

सामग्री-हैश वाले फ़ाइल नाम
एसेट के लिए अपरिवर्तनीय कैश
HTML का जीवनकाल कम हो

कैश रणनीति की मूल बातें

फ़ाइल नामों में हैश जोड़ें: app.3f2a1.js
कैश-नियंत्रण: max-age=31536000, अपरिवर्तनीय
HTML: कम TTL (जैसे no-store या कुछ मिनट)
कम उपयोग किए जाने वाले कोड को विभाजित करें

डेमो: आवश्यकता पर लोड होने वाले चंक को पहले से तैयार करना

इरादा स्पष्ट होने पर पहले से लोड करें: आवश्यकता पर लोड होने वाले चंक को जल्दी प्राप्त करना शुरू करें, ताकि अगला दृश्य तुरंत दिखाई दे।


<div id="root"></div>

डेमो: चित्र को पहले से लोड करना

चित्र दिखाने से पहले उसे पहले से लोड करें। टॉगल करने पर वह कैश से तुरंत दिखाई देता है।


<div id="root"></div>

पहले से लोड करना बनाम पहले से प्राप्त करना (अवधारणा)

पहले से लोड करना: बहुत जल्द आवश्यक एसेट के लिए उच्च प्राथमिकता
पहले से प्राप्त करना: बाद में आवश्यक हो सकने वाले एसेट के लिए कम प्राथमिकता
नेटवर्क पर प्रतिस्पर्धी दबाव से बचने के लिए इनका सीमित उपयोग करें

सावधानियाँ और कैश हेडर

हर चीज़ को पहले से लोड करने से बचें। सामग्री हैश का उपयोग करें और बंडल के लिए अपरिवर्तनीय कैश सेट करें; HTML का जीवनकाल कम रखें, ताकि नए हैश जल्दी उपलब्ध किए जा सकें।

कैशिंग की सर्वोत्तम पद्धति की जाँच

लंबी अवधि तक JS/CSS बंडलों को कैश करने के लिए कौन-सा तरीका सर्वोत्तम पद्धति है?

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

पुनरावलोकन

पुनरावलोकन: अपने बंडल फ़ाइल-नामों में हैश लगाएँ और उन्हें लंबे समय तक कैश करें। HTML को कम अवधि के लिए कैश करें और अगले दृश्यों को तुरंत खुलने जैसा महसूस कराने के लिए हल्के प्रीलोड/प्रीफ़ेच का उपयोग करें।

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

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

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

पाठ्यक्रम: 88
पाठ: 324

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

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

क्या “बंडल, कैश और प्रीलोडिंग संकेत” पाठ निःशुल्क है?

हाँ—“बंडल, कैश और प्रीलोडिंग संकेत” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

“बंडल, कैश और प्रीलोडिंग संकेत” में मैं क्या सीखूँगा?

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

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

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

“बंडल, कैश और प्रीलोडिंग संकेत” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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