Quicklink-এর সাথে create-react-app-এ প্রিফেচিং

Addy Osmani

Anton Karlovskiy

Demián Renzulli

এই কোডল্যাব আপনাকে দেখায় যে কীভাবে প্রিফেচিং পরবর্তী নেভিগেশনগুলির গতি বাড়ায় তা প্রদর্শন করার জন্য একটি রিঅ্যাক্ট এসপিএ ডেমোতে কুইকলিংক লাইব্রেরি কীভাবে প্রয়োগ করতে হয়।

পরিমাপ

অপ্টিমাইজেশান যোগ করার আগে, সর্বদা প্রথমে অ্যাপ্লিকেশনের বর্তমান অবস্থা বিশ্লেষণ করা একটি ভাল ধারণা।

• প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
• সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .

ওয়েবসাইটটি তৈরি-প্রতিক্রিয়া-অ্যাপ দিয়ে নির্মিত একটি সাধারণ ডেমো।

এইমাত্র খোলা নতুন ট্যাবে নিম্নলিখিত নির্দেশাবলী সম্পূর্ণ করুন:

1. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
2. নেটওয়ার্ক ট্যাবে ক্লিক করুন।
3. অক্ষম ক্যাশে চেকবক্স নির্বাচন করুন।
4. থ্রটলিং ড্রপ-ডাউন তালিকায় , একটি ধীর সংযোগের ধরন অনুকরণ করতে দ্রুত 3G নির্বাচন করুন।
5. অ্যাপটি পুনরায় লোড করুন।
6. ফিল্টার টেক্সটবক্সে chunk টাইপ করুন যে কোনও সংস্থান লুকিয়ে রাখতে যা তাদের নামে chunk অন্তর্ভুক্ত করে না।

সাইটটি রুট-ভিত্তিক কোড স্প্লিটিং ব্যবহার করে, যার জন্য শুরুতে শুধুমাত্র প্রয়োজনীয় কোডের অনুরোধ করা হয়েছে।

1. DevTools-এ নেটওয়ার্ক অনুরোধগুলি সাফ করুন ।
2. অ্যাপের মধ্যে, সেই পৃষ্ঠায় নেভিগেট করতে ব্লগ লিঙ্কে ক্লিক করুন।

নতুন রুটের জন্য JS এবং CSS খণ্ডগুলি পৃষ্ঠাটি রেন্ডার করার জন্য লোড করা হয়েছে।

এর পরে, আপনি এই সাইটে কুইকলিংক প্রয়োগ করবেন, যাতে এই খণ্ডগুলি হোম পেজে প্রিফেচ করা যায়, নেভিগেশনকে আরও দ্রুত করে।

এটি আপনাকে উভয় কৌশলের সেরা একত্রিত করতে দেয়:

• রুট-ভিত্তিক কোড বিভাজন ব্রাউজারকে পৃষ্ঠা লোডের সময় উচ্চ অগ্রাধিকারে শুধুমাত্র প্রয়োজনীয় অংশগুলি লোড করতে বলে।
• প্রিফেচিং ব্রাউজারের নিষ্ক্রিয় সময়ে, সর্বনিম্ন অগ্রাধিকারে ইন-ভিউপোর্ট লিঙ্কগুলির জন্য অংশগুলিকে লোড করতে ব্রাউজারকে বলে।

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 এ উপলব্ধ করা হবে।

কুইকলিংক কনফিগার করুন

এই মুহুর্তে আপনাকে আপনার প্রকল্পে Quicklink লাইব্রেরি ইনস্টল করতে হবে। সরলতার জন্য, আমরা ইতিমধ্যে এটি প্রকল্পে যোগ করেছি। এখানে কমান্ড যা আপনাকে চালানোর প্রয়োজন হবে:

npm install --save quicklink

সম্পাদনার জন্য src/components/App/index.js খুলুন।

প্রথমে, কুইকলিংক উচ্চ অর্ডার উপাদান (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'));

এরপর, quicklink কল করার সময় একটি আর্গুমেন্ট হিসাবে ব্যবহার করতে, Blog পরিবর্তনশীল ঘোষণার পরে একটি 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() দিয়ে মোড়ানো রুটগুলির জন্য অংশগুলি প্রিফেচ করার নির্দেশ দেয়, যখন লিঙ্কটি ভিউতে আসে।

আবার পরিমাপ করুন

পরিমাপ থেকে প্রথম 6টি ধাপ পুনরাবৃত্তি করুন। এখনো ব্লগ পাতা নেভিগেট করবেন না.

যখন হোম পেজ লোড হয় তখন সেই রুটের অংশগুলি লোড হয়। এর পরে, কুইকলিঙ্ক ইন-ভিউপোর্ট লিঙ্কগুলির জন্য রুটের অংশগুলিকে প্রিফেচ করে:

এই অংশগুলিকে সর্বনিম্ন অগ্রাধিকারে এবং পৃষ্ঠাটিকে ব্লক না করে অনুরোধ করা হয়েছে৷

পরবর্তী:

1. নেটওয়ার্ক লগ আবার সাফ করুন।
2. অক্ষম ক্যাশে চেকবক্স নিষ্ক্রিয় করুন।
3. সেই পৃষ্ঠায় নেভিগেট করতে ব্লগ লিঙ্কে ক্লিক করুন।

সাইজ কলামটি নির্দেশ করে যে এই অংশগুলি নেটওয়ার্কের পরিবর্তে "প্রিফেচ ক্যাশে" থেকে পুনরুদ্ধার করা হয়েছে। Quicklink ছাড়াই এই খণ্ডগুলি লোড করতে প্রায় 580ms সময় লেগেছে। লাইব্রেরি ব্যবহার করে এখন 2ms লাগে, যা 99% হ্রাসের প্রতিনিধিত্ব করে!