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 का इस्तेमाल करके रास्तों और चंक का मैप बनाता है. इससे यह तय किया जा सकता है कि लिंक दिखने पर, कौनसी फ़ाइलों को पहले से लोड किया जाए. अपनी पूरी साइट पर इस तकनीक को लागू करने से, नेविगेशन को बेहतर बनाया जा सकता है. इससे नेविगेशन तुरंत दिखने लगते हैं.