यह कोडलैब आपको React SPA डेमो में Quicklink लाइब्रेरी को लागू करने का तरीका बताता है, ताकि आप यह दिखा सकें कि प्रीफ़ेच करने से आगे के नेविगेशन कैसे तेज़ होते हैं.
दूरी मापें
ऑप्टिमाइज़ेशन जोड़ने से पहले, ऐप्लिकेशन की मौजूदा स्थिति का विश्लेषण कर लेना हमेशा बेहतर होता है.
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
यह वेबसाइट, create-react-app की मदद से बनाया गया एक आसान डेमो है.
अभी-अभी खुले हुए नए टैब में, इन निर्देशों का पालन करें:
- DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- नेटवर्क टैब पर क्लिक करें.
- कैश मेमोरी बंद करें चेकबॉक्स चुनें.
- थ्रटलिंग ड्रॉप-डाउन सूची में, धीमे कनेक्शन को सिम्युलेट करने के लिए फ़ास्ट 3G चुनें.
- ऐप्लिकेशन को फिर से लोड करें.
- जिन संसाधनों के नाम में
chunkशामिल नहीं है उन्हें छिपाने के लिए, फ़िल्टर टेक्स्टबॉक्स मेंchunkटाइप करें.
साइट, रूट के हिसाब से कोड को बांटने की सुविधा का इस्तेमाल करती है. इसकी वजह से, शुरुआत में सिर्फ़ ज़रूरी कोड का अनुरोध किया जाता है.
- DevTools में नेटवर्क अनुरोधों को मिटाएं.
- ऐप्लिकेशन में, उस पेज पर जाने के लिए ब्लॉग लिंक पर क्लिक करें.
पेज को रेंडर करने के लिए, नए रास्ते के JS और सीएसएस हिस्से लोड किए जाते हैं.
इसके बाद, आपको इस साइट में क्विकलिंक लागू करना होगा, ताकि इन हिस्सों को होम पेज पर प्रीफ़ेच किया जा सके. इससे, नेविगेशन ज़्यादा तेज़ी से होगा.
इसकी मदद से, दोनों तकनीकों का बेहतरीन इस्तेमाल किया जा सकता है:
- रूट के हिसाब से कोड को अलग-अलग करने की सुविधा, ब्राउज़र को पेज लोड होने के दौरान ज़्यादा प्राथमिकता पर सिर्फ़ ज़रूरी हिस्सों को लोड करने के लिए कहती है.
- प्रीफ़ेच करने की सुविधा, ब्राउज़र के इस्तेमाल में न होने पर, ब्राउज़र को इन-व्यूपोर्ट लिंक के लिए सबसे कम प्राथमिकता पर हिस्से लोड करने के लिए कहती है.
webpack-route-manifest को कॉन्फ़िगर करें
इसका पहला चरण webpack-route-manifest को इंस्टॉल और कॉन्फ़िगर करना है. यह एक वेबपैक प्लगिन है, जिसकी मदद से रूट को उनके अलग-अलग हिस्सों से जोड़कर मेनिफ़ेस्ट फ़ाइल जनरेट की जा सकती है.
आम तौर पर, आपको लाइब्रेरी इंस्टॉल करनी होगी, लेकिन हम आपके लिए पहले ही ऐसा कर चुके हैं. आपको यह निर्देश चलाना होगा:
npm install webpack-route-manifest --save-dev
config-overrides.js ऐसी फ़ाइल है जो आपके प्रोजेक्ट रूट डायरेक्ट्री में मौजूद होती है. यहां वेबपैक कॉन्फ़िगरेशन के मौजूदा व्यवहार को बदला जा सकता है. इसके लिए, आपको प्रोजेक्ट हटाने की ज़रूरत नहीं पड़ेगी.
- सोर्स देखने के लिए, सोर्स देखें दबाएं.
बदलाव करने के लिए config-overrides.js खोलें और फ़ाइल की शुरुआत में webpack-route-manifest डिपेंडेंसी जोड़ें:
const path = require('path');
const RouteManifest = require('webpack-route-manifest');
इसके बाद, config-overrides.js के नीचे यह कोड जोड़कर webpack-route-manifest प्लगिन को कॉन्फ़िगर करें:
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 खोलें.
सबसे पहले, Quicklink के उच्च ऑर्डर कॉम्पोनेंट (HOC) को इंपोर्ट करें:
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 वैरिएबल के एलान के बाद, quicklink को कॉल करते समय तर्क के तौर पर इस्तेमाल करने के लिए, options ऑब्जेक्ट बनाएं:
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() के साथ रैप किए गए रूट के डेटा को प्रीफ़ेच करने का निर्देश देता है.
फिर से मापें
मेज़र करने के बाद, पहले छह चरण दोहराएं. अभी ब्लॉग पेज पर न जाएं.
जब होम पेज पर उस रूट के लिए हिस्से लोड हो जाते हैं. इसके बाद, क्विकलिंक इन-व्यूपोर्ट लिंक के लिए रूट के हिस्सों को प्रीफ़ेच करता है:
इन हिस्सों का अनुरोध सबसे कम प्राथमिकता पर और पेज को ब्लॉक किए बिना किया जाता है.
अगला वीडियो:
- नेटवर्क लॉग को फिर से मिटाएं.
- कैश मेमोरी बंद करें चेकबॉक्स को बंद करें.
- उस पेज पर जाने के लिए ब्लॉग लिंक पर क्लिक करें.
साइज़ कॉलम से पता चलता है कि इन हिस्सों को नेटवर्क के बजाय, "प्रीफ़ेच कैश मेमोरी" से वापस लाया गया था. क्विकलिंक के बिना इन हिस्सों को लोड करने में करीब 580 मि॰से॰ का समय लगा. लाइब्रेरी का इस्तेमाल करने से अब इसमें 2 मि॰से॰ का समय लग सकता है. इससे 99% की कमी का पता चलता है!