Quicklink की मदद से प्रतिक्रिया दें में नेविगेशन की रफ़्तार बढ़ाना

React के सिंगल पेज ऐप्लिकेशन के लिए, क्विकलिंक की मदद से व्यूपोर्ट में मौजूद लिंक को अपने-आप प्रीफ़ेच करें.

Addy Osmani
Addy Osmani
X GitHub
Anton Karlovskiy
Demián Renzulli

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

कई पेज वाले ऐप्लिकेशन में लाइब्रेरी, इन-व्यूपोर्ट लिंक के लिए दस्तावेज़ों (जैसे कि /article.html) को प्रीफ़ेच करती है, ताकि जब उपयोगकर्ता इन लिंक पर क्लिक करे, तब उन्हें एचटीटीपी कैश से पिक अप किया जा सके.

एक पेज वाले ऐप्लिकेशन, आम तौर पर रूट के हिसाब से कोड को अलग-अलग करने की तकनीक का इस्तेमाल करते हैं. इससे साइट, किसी रूट के लिए कोड सिर्फ़ तब लोड करती है, जब उपयोगकर्ता उस पर नेविगेट करता है. इन फ़ाइलों (JS, CSS) को आम तौर पर "खंड" कहा जाता है.

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

इसे हासिल करना कुछ चुनौतियां हैं:

  • किसी रूट (जैसे, /article) पर जाने से पहले यह पता लगाना आसान नहीं है कि उससे कौनसे चंक (जैसे, article.chunk.js) जुड़े हैं.
  • इन चंक के फ़ाइनल यूआरएल के नामों का अनुमान नहीं लगाया जा सकता, क्योंकि मॉड्यूल बंडलर आम तौर पर वर्शनिंग (उदाहरण के लिए, article.chunk.46e51.js) के लिए लंबे समय तक हैशिंग का इस्तेमाल करते हैं.

इस गाइड में बताया गया है कि Quicklink इन समस्याओं को कैसे हल करता है और React के सिंगल पेज ऐप्लिकेशन में, बड़े पैमाने पर प्रीफ़ेच करने की सुविधा कैसे देता है.

हर रास्ते से जुड़े खंड ज्ञात करना

quicklink के मुख्य कॉम्पोनेंट में से एक webpack-route-manifest है. यह एक 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 चलाकर 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 को यह बताने के लिए कि इन रूट को व्यू में आने पर प्रीफ़ेच किया जाना चाहिए:

  1. कॉम्पोनेंट की शुरुआत में quicklink एचओसी इंपोर्ट करें.
  2. हर रूट को 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"> टैग इंजेक्ट करती है, ताकि उन्हें पहले से फ़ेच किया जा सके. ब्राउज़र, पहले से फ़ेच किए गए संसाधनों का अनुरोध सबसे कम प्राथमिकता पर करेगा और उन्हें एचटीटीपी कैश मेमोरी में पांच मिनट तक सेव रखेगा. इसके बाद, संसाधन के cache-control नियम लागू होंगे. इस वजह से, जब कोई उपयोगकर्ता किसी लिंक पर क्लिक करके किसी रूट पर जाता है, तो चंक को कैश मेमोरी से वापस लाया जाएगा. इससे, उस रूट को रेंडर करने में लगने वाला समय काफ़ी कम हो जाएगा.

नतीजा

पेज को पहले से लोड करने से, आने वाले समय में नेविगेशन के लिए लोड होने में लगने वाला समय काफ़ी कम हो सकता है. React के सिंगल-पेज ऐप्लिकेशन में, उपयोगकर्ता के किसी रूट पर जाने से पहले, उससे जुड़े चंक लोड करके ऐसा किया जा सकता है. React SPA के लिए Quicklink का समाधान, webpack-route-manifest का इस्तेमाल करके रास्तों और चंक का मैप बनाता है. इससे यह तय किया जा सकता है कि लिंक दिखने पर, कौनसी फ़ाइलों को पहले से लोड किया जाए. अपनी पूरी साइट पर इस तकनीक को लागू करने से, नेविगेशन को इस हद तक बेहतर बनाया जा सकता है कि वे तुरंत दिखने लगें.