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

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

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

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

कई पेज वाले ऐप्लिकेशन में लाइब्रेरी, इन-व्यूपोर्ट लिंक के लिए दस्तावेज़ों (जैसे कि /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 चलाकर क्विकलिंक इंस्टॉल करना है.

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

नतीजा

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