प्रतिक्रिया एक पेज वाले ऐप्लिकेशन के लिए, क्विकलिंक की मदद से इन-व्यूपोर्ट लिंक को अपने-आप प्रीफ़ेच करें.
प्रीफ़ेचिंग एक ऐसी तकनीक है जिसकी मदद से, नेविगेशन की रफ़्तार बढ़ाई जा सकती है. इसके लिए, समय से पहले अगले पेज के लिए संसाधनों को डाउनलोड किया जाता है. Quicklink एक लाइब्रेरी है, जिसकी मदद से इस तकनीक को बड़े पैमाने पर लागू किया जा सकता है. ऐसा करने के लिए, व्यू में आने वाले लिंक को अपने-आप प्रीफ़ेच कर दिया जाता है.
कई पेज वाले ऐप्लिकेशन में लाइब्रेरी, इन-व्यूपोर्ट लिंक के लिए दस्तावेज़ों (जैसे कि /article.html) को प्रीफ़ेच करती है, ताकि जब उपयोगकर्ता इन लिंक पर क्लिक करे, तो उन्हें एचटीटीपी कैश से चुना जा सके.
एक पेज वाले ऐप्लिकेशन आम तौर पर, रूट के हिसाब से कोड को बांटना नाम की तकनीक का इस्तेमाल करते हैं. इससे किसी दिए गए रूट के लिए साइट को कोड लोड करने की अनुमति सिर्फ़ तब मिलती है, जब उपयोगकर्ता उस रूट पर जाता है. इन फ़ाइलों (JS, सीएसएस) को आम तौर पर "चंक" कहा जाता है.
हालांकि, इन साइटों में दस्तावेज़ों को प्रीफ़ेच करने के बजाय, इन हिस्सों को प्रीफ़ेच करने से पहले पेज को प्रीफ़ेच करने की ज़रूरत होती है.
इस लक्ष्य को हासिल करने के लिए कुछ चुनौतियां आती हैं:
- किसी दिए गए रास्ते (जैसे कि
/article) पर लैंड करने से पहले यह पता लगाना मुश्किल है कि कौनसे हिस्से (जैसेarticle.chunk.js) जुड़े हैं. - इन हिस्सों के फ़ाइनल यूआरएल के नामों का अनुमान नहीं लगाया जा सकता, क्योंकि मॉडर्न मॉड्यूल बंडलर आम तौर पर वर्शन (जैसे,
article.chunk.46e51.js) के लिए लंबे समय तक चलने वाली हैशिंग का इस्तेमाल करते हैं.
इस गाइड में बताया गया है कि Quicklink इन चुनौतियों को कैसे हल करता है. साथ ही, इसकी मदद से आपको 'रिऐक्ट एक पेज' ऐप्लिकेशन में बड़े पैमाने पर प्रीफ़ेच करने की सुविधा कैसे मिलती है.
हर रास्ते से जुड़े खंड तय करें
quicklink के मुख्य कॉम्पोनेंट में से एक webpack-रूट-मेनिफ़ेस्ट है. यह webpack प्लगिन है. इसकी मदद से, रास्तों और हिस्सों का JSON डिक्शनरी जनरेट की जा सकती है.
इससे लाइब्रेरी को यह पता चलता है कि ऐप्लिकेशन के हर रूट के लिए किन फ़ाइलों की ज़रूरत होगी. साथ ही, व्यू में रूट के आने पर उन्हें प्रीफ़ेच भी किया जा सकता है.
प्रोजेक्ट के साथ प्लगिन को इंटिग्रेट करने के बाद, यह हर रूट को उससे जुड़े अलग-अलग हिस्सों से जोड़ते हुए एक JSON मेनिफ़ेस्ट फ़ाइल बनाएगा:
{
'/about': [
{
type: 'style',
href: '/static/css/about.f6fd7d80.chunk.css',
},
{
type: 'script',
href: '/static/js/about.1cdfef3b.chunk.js',
},
],
'/blog': [
{
type: 'style',
href: '/static/css/blog.85e80e75.chunk.css',
},
{
type: 'script',
href: '/static/js/blog.35421503.chunk.js',
},
],
}
इस मेनिफ़ेस्ट फ़ाइल का अनुरोध दो तरीकों से किया जा सकता है:
- यूआरएल से, जैसे
https://site_url/rmanifest.json. - विंडो ऑब्जेक्ट के ज़रिए,
window.__rmanifestपर.
इन-व्यूपोर्ट रूट के लिए प्रीफ़ेच करें
मेनिफ़ेस्ट फ़ाइल के उपलब्ध होने के बाद, अगला चरण npm install quicklink चलाकर क्विकलिंक इंस्टॉल करना है.
इसके बाद, ज़्यादा क्रम वाले कॉम्पोनेंट (एचओसी) withQuicklink() का इस्तेमाल यह बताने के लिए किया जा सकता है कि व्यू में लिंक के आने पर दिए गए रास्ते को प्रीफ़ेच किया जाना चाहिए.
यह कोड, React ऐप्लिकेशन के App कॉम्पोनेंट से जुड़ा है. यह कोड, चार लिंक वाला टॉप मेन्यू रेंडर करता है:
const App = () => (
<div className={style.app}>
<Hero />
<main className={style.wrapper}>
<Suspense fallback={<div>Loading…</div>}>
<Route path="/" exact component={Home} />
<Route path="/blog" exact component={Blog} />
<Route path="/blog/:title" component={Article} />
<Route path="/about" exact component={About} />
</Suspense>
</main>
<Footer />
</div>
);
Quicklink को यह बताने के लिए कि ये रास्ते व्यू में आते ही प्रीफ़ेच किए जाने चाहिए:
- कॉम्पोनेंट की शुरुआत में
quicklinkएचओसी को इंपोर्ट करें. - हर रूट को
withQuicklink()एचओसी के साथ रैप करें और पेज कॉम्पोनेंट और विकल्प पैरामीटर को पास करें.
const options = {
origins: [],
};
const App = () => (
<div className={style.app}>
<Hero />
<main className={style.wrapper}>
<Suspense fallback={<div>Loading…</div>}>
<Route path="/" exact component={withQuicklink(Home, options)} />
<Route path="/blog" exact component={withQuicklink(Blog, options)} />
<Route
path="/blog/:title"
component={withQuicklink(Article, options)}
/>
<Route path="/about" exact component={withQuicklink(About, options)} />
</Suspense>
</main>
<Footer />
</div>
);
withQuicklink() एचओसी, रास्ते के पाथ का इस्तेमाल एक कुंजी के तौर पर करता है, ताकि rmanifest.json से उसके कई हिस्से पाए जा सकें.
हुड के तहत, जैसे ही लिंक व्यू में आते हैं, लाइब्रेरी हर हिस्से के लिए पेज में एक <link rel="prefetch"> टैग इंजेक्ट करती है, ताकि उन्हें प्रीफ़ेच किया जा सके.
प्रीफ़ेच किए गए संसाधनों का अनुरोध सबसे कम प्राथमिकता पर ब्राउज़र करेगा और उन्हें 5 मिनट तक एचटीटीपी कैश में रखा जाएगा. इसके बाद, संसाधन के cache-control नियम लागू होते हैं.
इस वजह से, जब कोई उपयोगकर्ता किसी लिंक पर क्लिक करके किसी दिए गए रास्ते पर जाता है, तो कैश मेमोरी से इन हिस्सों को वापस लाया जाएगा. इससे उस रूट को रेंडर करने में लगने वाला समय काफ़ी बढ़ जाएगा.
नतीजा
प्रीफ़ेच करने से, आगे के नेविगेशन के लिए लोड होने में लगने वाले समय में काफ़ी सुधार हो सकता है. प्रतिक्रिया वाले एक पेज वाले ऐप्लिकेशन में, ऐसा करने के लिए हर रूट से जुड़े हिस्सों को उपयोगकर्ता के पहुंचने से पहले लोड किया जाता है.
'रिऐक्ट एसपीए' के लिए क्विकलिंक की सुविधा, webpack-route-manifest का इस्तेमाल करके रूट और हिस्सों का मैप बनाती है. इससे यह तय होता है कि व्यू में किसी लिंक के आने पर, किन फ़ाइलों को प्रीफ़ेच किया जाए.
इस तकनीक को आपकी पूरी साइट में लागू करने से, नेविगेशन काफ़ी बेहतर हो सकते हैं. इससे, वे तुरंत दिखने लगेंगे.