Quicklink से 'प्रतिक्रिया बनाएं' ऐप्लिकेशन में प्रीफ़ेच करना

Addy Osmani

Anton Karlovskiy

Demián Renzulli

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

मापें

ऑप्टिमाइज़ेशन जोड़ने से पहले, ऐप्लिकेशन की मौजूदा स्थिति का विश्लेषण करना हमेशा बेहतर रहता है.

• प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन .

वेबसाइट एक सामान्य डेमो है, जिसे create-react-app की मदद से बनाया गया है.

हाल ही में खोले गए नए टैब में, इन निर्देशों को पूरा करें:

1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
2. नेटवर्क टैब पर क्लिक करें.
3. कैश मेमोरी बंद करें चेकबॉक्स चुनें.
4. थ्रॉटलिंग ड्रॉप-डाउन सूची में, धीमे कनेक्शन टाइप को सिम्युलेट करने के लिए फ़ास्ट 3G चुनें.
5. ऐप्लिकेशन को फिर से लोड करें.
6. जिन संसाधनों के नाम में chunk शामिल नहीं है उन्हें छिपाने के लिए, फ़िल्टर टेक्स्टबॉक्स में chunk टाइप करें.

साइट रूट-आधारित कोड को अलग-अलग करने का इस्तेमाल करती है. इसकी मदद से शुरुआत में सिर्फ़ ज़रूरी कोड का अनुरोध किया जाता है.

1. DevTools में नेटवर्क अनुरोध हटाएं.
2. ऐप्लिकेशन में, उस पेज पर जाने के लिए ब्लॉग लिंक पर क्लिक करें.

पेज को रेंडर करने के लिए, नए रूट के लिए JS और सीएसएस डेटा लोड किए जाते हैं.

इसके बाद, आपको इस साइट में Quicklink लागू करना होगा, ताकि ये हिस्से होम पेज पर प्रीफ़ेच किए जा सकें, जिससे नेविगेशन ज़्यादा तेज़ी से हो सके.

इसकी मदद से, दोनों की सबसे अच्छी तकनीकों का इस्तेमाल किया जा सकता है:

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

webpack-route-manifest को कॉन्फ़िगर करें

इसका सबसे पहला चरण webpack-route-manifest को इंस्टॉल और कॉन्फ़िगर करना है. यह एक ऐसा Webpack प्लगिन है जो आपको रूट को उनके मिलते-जुलते हिस्सों से जोड़ने वाली मेनिफ़ेस्ट फ़ाइल जनरेट करने की सुविधा देता है.

आम तौर पर, आपको लाइब्रेरी इंस्टॉल करनी होती है, लेकिन हमने आपके लिए पहले ही यह काम कर दिया है. आपको यहां दिया गया निर्देश चलाने की ज़रूरत होगी:

npm install webpack-route-manifest --save-dev

config-overrides.js आपके प्रोजेक्ट की रूट डायरेक्ट्री में मौजूद फ़ाइल है. यहां प्रोजेक्ट को इंजेक्ट किए बिना, webpack कॉन्फ़िगरेशन की मौजूदा कार्रवाई को बदला जा सकता है.

• सोर्स देखने के लिए, View Source दबाएं.

बदलाव करने के लिए config-overrides.js को खोलें और फ़ाइल की शुरुआत में webpack-route-manifest डिपेंडेंसी जोड़ें:

const path = require('path');
const RouteManifest = require('webpack-route-manifest');

इसके बाद, इन्हें जोड़कर webpack-route-manifest प्लगिन को कॉन्फ़िगर करें कोड को config-overrides.js में सेव करें:

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: {
      '@assets': `${path.resolve(__dirname, 'src/assets')}`,
      '@pages': `${path.resolve(__dirname, 'src/pages')}`,
      '@components': `${path.resolve(__dirname, 'src/components')}`,
    },
  };

  config.plugins.push(
    new RouteManifest({
      minify: true,
      filename: 'rmanifest.json',
      routes(str) {
        let out = str.replace('@pages', '').toLowerCase();
        if (out === '/article') return '/blog/:title';
        if (out === '/home') return '/';
        return out;
      },
    }),
  );

  return config;
};

नया कोड ये काम करता है:

• config.resolve, पेजों, ऐसेट, और कॉम्पोनेंट के लिए अंदरूनी रूट के साथ वैरिएबल की जानकारी देता है.
• config.plugins.push() एक RouteManifest ऑब्जेक्ट बनाता है और उसे कॉन्फ़िगरेशन पास करता है, ताकि साइट के रूट और हिस्सों के आधार पर rmanifest.json फ़ाइल जनरेट की जा सके.

manifest.json फ़ाइल जनरेट की जाएगी और https://site_url/rmanifest.json पर उपलब्ध कराई जाएगी.

क्विकलिंक को कॉन्फ़िगर करें

अब आपको अपने प्रोजेक्ट में क्विकलिंक लाइब्रेरी इंस्टॉल करनी होगी. इसे आसानी से समझने के लिए, हमने इसे पहले ही प्रोजेक्ट में जोड़ दिया है. आपको यहां दिया गया निर्देश चलाने की ज़रूरत होगी:

npm install --save quicklink

बदलाव करने के लिए src/components/App/index.js खोलें.

सबसे पहले, क्विकलिंक हायर ऑर्डर कॉम्पोनेंट (एचओसी) को इंपोर्ट करें:

import React, { lazy, Suspense } from 'react';
import { Route } from 'react-router-dom';

import Footer from '@components/Footer';
import Hero from '@components/Hero';
import style from './index.module.css';
import { withQuicklink } from 'quicklink/dist/react/hoc.js';

const Home = lazy(() => import(/* webpackChunkName: "home" */ '@pages/Home'));
const About = lazy(() => import(/* webpackChunkName: "about" */ '@pages/About'));
const Article = lazy(() => import(/* webpackChunkName: "article" */ '@pages/Article'));
const Blog = lazy(() => import(/* webpackChunkName: "blog" */ '@pages/Blog'));

इसके बाद, Blog वैरिएबल के एलान के बाद options ऑब्जेक्ट बनाएं, ताकि quicklink को कॉल करते समय आर्ग्युमेंट के तौर पर इस्तेमाल किया जा सके:

const options = {
    origins: []
};

आखिर में, हर रूट को withQuicklink() हायर ऑर्डर कॉम्पोनेंट के साथ रैप करें, उसे options पैरामीटर और उस रूट के लिए टारगेट कॉम्पोनेंट पास करें:

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

फिर से मापें

मेज़र विकल्प के पहले छह चरण दोहराएं. अभी ब्लॉग पेज पर न जाएं.

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

पेज को ब्लॉक किए बिना, सबसे कम प्राथमिकता वाले हिस्से के इतने हिस्से का अनुरोध किया जाता है.

अगला वीडियो:

1. नेटवर्क लॉग फिर से मिटाएं.
2. कैश मेमोरी बंद करें चेकबॉक्स को बंद करें.
3. उस पेज पर जाने के लिए ब्लॉग लिंक पर क्लिक करें.

साइज़ कॉलम से पता चलता है कि ये डेटा सेगमेंट, नेटवर्क के बजाय, "प्रीफ़ेच कैश" से वापस लाए गए थे. क्विकलिंक के बिना डेटा के इन हिस्सों को लोड करने में करीब 580 मि॰से॰ लगे. लाइब्रेरी का इस्तेमाल करने में अभी 2 मि॰से॰ लगते हैं, जो कि 99% की कमी को दिखाता है!