Quicklink এর সাথে প্রতিক্রিয়াতে নেভিগেশনের গতি বাড়ান

প্রতিক্রিয়া একক পৃষ্ঠা অ্যাপ্লিকেশনের জন্য কুইকলিঙ্ক সহ ভিউপোর্ট লিঙ্কগুলি স্বয়ংক্রিয়ভাবে প্রিফেচ করুন।

Addy Osmani

Anton Karlovskiy

Demián Renzulli

প্রিফেচিং হল একটি কৌশল যা পরবর্তী পৃষ্ঠার জন্য রিসোর্স ডাউনলোড করে নেভিগেশনের গতি বাড়ানোর জন্য, সময়ের আগে। কুইকলিংক হল একটি লাইব্রেরি যা আপনাকে এই কৌশলটি স্কেলে প্রয়োগ করতে দেয়, লিঙ্কগুলি দেখার সাথে সাথে স্বয়ংক্রিয়ভাবে প্রিফেচ করে।

বহু-পৃষ্ঠার অ্যাপ্লিকেশনগুলিতে লাইব্রেরি ইন-ভিউপোর্ট লিঙ্কগুলির জন্য নথিগুলি (যেমন /article.html ) প্রিফেট করে, যাতে ব্যবহারকারী যখন এই লিঙ্কগুলিতে ক্লিক করে তখন সেগুলি HTTP ক্যাশে থেকে তোলা যায়।

একক-পৃষ্ঠার অ্যাপগুলি সাধারণত রুট-ভিত্তিক কোড স্প্লিটিং নামে একটি কৌশল ব্যবহার করে। এটি সাইটটিকে একটি প্রদত্ত রুটের জন্য কোডটি লোড করার অনুমতি দেয় যখন ব্যবহারকারী এটিতে নেভিগেট করে। এই ফাইলগুলি (JS, CSS) সাধারণত "খণ্ড" হিসাবে উল্লেখ করা হয়।

সেই সাথে বলা হয়েছে, এই সাইটগুলিতে, নথিগুলি প্রিফেচ করার পরিবর্তে পৃষ্ঠার প্রয়োজনের আগে এই অংশগুলিকে প্রিফেচ করার মাধ্যমে সবচেয়ে বড় পারফরম্যান্স লাভ আসে৷

এটি অর্জন করা কিছু চ্যালেঞ্জ উপস্থাপন করে:

• কোন অংশে (যেমন article.chunk.js ) কোন প্রদত্ত রুটের সাথে যুক্ত (যেমন /article ) এটিতে নামার আগে তা নির্ধারণ করা তুচ্ছ নয়।
• এই খণ্ডগুলির চূড়ান্ত URL নামগুলি ভবিষ্যদ্বাণী করা যায় না, কারণ আধুনিক মডিউল বান্ডলারগুলি সাধারণত সংস্করণ করার জন্য দীর্ঘমেয়াদী হ্যাশিং ব্যবহার করে (যেমন article.chunk.46e51.js )৷

এই নির্দেশিকাটি ব্যাখ্যা করে কিভাবে Quicklink এই চ্যালেঞ্জগুলি সমাধান করে এবং আপনাকে React একক পৃষ্ঠার অ্যাপে স্কেলে প্রিফেচিং অর্জন করতে দেয়।

দ্রষ্টব্য: এই মুহুর্তে এই সমাধানটি শুধুমাত্র প্রতিক্রিয়া-রাউটারের সাথে সামঞ্জস্যপূর্ণ।

এটি ব্যবহার করে দেখুন: Quicklink-এর একটি নির্দেশিত, হ্যান্ডস-অন প্রদর্শনের জন্য Quicklink কোডল্যাবের সাথে তৈরি-প্রতিক্রিয়া-অ্যাপে প্রিফেচিং দেখুন।

প্রতিটি রুটের সাথে যুক্ত অংশগুলি নির্ধারণ করুন

quicklink মূল উপাদানগুলির মধ্যে একটি হল webpack-route-manifest , একটি ওয়েবপ্যাক প্লাগইন যা আপনাকে রুট এবং অংশগুলির একটি 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',
    },
  ],
}

এই ম্যানিফেস্ট ফাইল দুটি উপায়ে অনুরোধ করা যেতে পারে:

• URL দ্বারা, যেমন https://site_url/rmanifest.json ।
• উইন্ডো অবজেক্টের মাধ্যমে, window.__rmanifest এ।

ইন-ভিউপোর্ট রুটের জন্য খণ্ডগুলি প্রিফেচ করুন

ম্যানিফেস্ট ফাইলটি উপলব্ধ হয়ে গেলে, পরবর্তী ধাপ হল npm install quicklink চালিয়ে Quicklink ইনস্টল করা।

তারপর, withQuicklink() উচ্চ ক্রম উপাদান (HOC) ব্যবহার করা যেতে পারে যে একটি প্রদত্ত রুট প্রিফেচ করা উচিত যখন লিঙ্কটি ভিউতে আসে।

নিম্নলিখিত কোডটি একটি প্রতিক্রিয়া অ্যাপের একটি 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>
);

কুইকলিংককে জানাতে যে এই রুটগুলি ভিউতে আসার সাথে সাথে প্রিফেচ করা উচিত:

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() HOC rmanifest.json থেকে এর সম্পর্কিত অংশগুলি পেতে একটি কী হিসাবে রুটের পথ ব্যবহার করে। হুডের নীচে, লিঙ্কগুলি ভিউতে আসার সাথে সাথে, লাইব্রেরি প্রতিটি খণ্ডের জন্য পৃষ্ঠায় একটি <link rel="prefetch"> ট্যাগ ইনজেক্ট করে যাতে সেগুলি প্রিফেচ করা যায়৷ ব্রাউজার দ্বারা প্রিফেচড রিসোর্সগুলিকে সর্বনিম্ন অগ্রাধিকারে অনুরোধ করা হবে এবং 5 মিনিটের জন্য HTTP ক্যাশে রাখা হবে, এর পরে, রিসোর্সের cache-control নিয়মগুলি প্রযোজ্য হবে৷ এর ফলস্বরূপ, যখন একজন ব্যবহারকারী একটি লিঙ্কে ক্লিক করে এবং একটি নির্দিষ্ট রুটে চলে যায়, তখন খণ্ডগুলি ক্যাশে থেকে পুনরুদ্ধার করা হবে, সেই রুটটি রেন্ডার করতে যে সময় লাগে তা ব্যাপকভাবে উন্নত করে।

উপসংহার

প্রিফেচিং ভবিষ্যতে নেভিগেশনের জন্য লোডের সময়কে ব্যাপকভাবে উন্নত করতে পারে। রিঅ্যাক্ট সিঙ্গেল-পেজ অ্যাপে, ব্যবহারকারীর ল্যান্ড করার আগে প্রতিটি রুটের সাথে যুক্ত অংশগুলি লোড করে এটি অর্জন করা যেতে পারে। রিঅ্যাক্ট এসপিএর জন্য কুইকলিংকের সমাধান রুট এবং খণ্ডগুলির একটি মানচিত্র তৈরি করতে webpack-route-manifest ব্যবহার করে, কোন ফাইলগুলি প্রিফেচ করতে হবে তা নির্ধারণ করতে, যখন একটি লিঙ্ক দৃশ্যে আসে। আপনার সাইট জুড়ে এই কৌশলটি প্রয়োগ করার ফলে নেভিগেশনগুলিকে তাত্ক্ষণিকভাবে উপস্থিত করার ক্ষেত্রে ব্যাপকভাবে উন্নতি করতে পারে৷