কৌণিকভাবে রুট প্রিলোডিং কৌশল

ব্যবহারকারীদের নেভিগেশন গতি বাড়ানোর জন্য আগে থেকেই রুটগুলি প্রিলোড করুন৷

মিনকো গেচেভ

রুট-স্তরের কোড বিভাজন আপনাকে প্রাথমিকভাবে প্রয়োজন হয় না এমন রুটের সাথে যুক্ত জাভাস্ক্রিপ্ট বিলম্বিত করে একটি অ্যাপ্লিকেশনের প্রাথমিক লোড সময় কমাতে সাহায্য করতে পারে। এইভাবে, কৌণিক রাউটার অপেক্ষা করে যতক্ষণ না একজন ব্যবহারকারী একটি প্রদত্ত রুটে নেভিগেট না করে সংশ্লিষ্ট জাভাস্ক্রিপ্ট ডাউনলোড করার জন্য একটি নেটওয়ার্ক অনুরোধ ট্রিগার করার আগে।

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

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

কৌণিকভাবে রুট প্রিলোডিং কৌশল

কৌণিক রাউটার preloadingStrategy নামে একটি কনফিগারেশন বৈশিষ্ট্য প্রদান করে, যা অলস-লোডেড কৌণিক মডিউলগুলিকে প্রিলোডিং এবং প্রক্রিয়াকরণের জন্য যুক্তি সংজ্ঞায়িত করে। আমরা দুটি সম্ভাব্য কৌশল কভার করব:

  • PreloadAllModules , যা সমস্ত অলস-লোড করা রুটগুলিকে প্রিলোড করে, যেমন নামটি বোঝায়
  • QuicklinkStrategy , যা শুধুমাত্র বর্তমান পৃষ্ঠার লিঙ্কগুলির সাথে যুক্ত রুটগুলিকে প্রিলোড করে৷

এই পোস্টের বাকি অংশটি একটি নমুনা কৌণিক অ্যাপকে বোঝায়। আপনি GitHub এ সোর্স কোড খুঁজে পেতে পারেন।

PreloadAllModules কৌশল ব্যবহার করে

নমুনা অ্যাপটিতে বেশ কয়েকটি অলস-লোড রুট রয়েছে। PreloadAllModules কৌশল ব্যবহার করে সেগুলিকে প্রিলোড করতে - যা কৌণিক-এ তৈরি করা হয়েছে - রাউটার কনফিগারেশনে preloadingStrategy সম্পত্তির মান হিসাবে এটি নির্দিষ্ট করুন:

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

এখন অ্যাপ্লিকেশনটি পরিবেশন করুন এবং Chrome DevTools-এ নেটওয়ার্ক প্যানেলটি দেখুন:

  1. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
  2. নেটওয়ার্ক ট্যাবে ক্লিক করুন।

আপনি দেখতে পাবেন যে রাউটারটি nyan-nyan-module.js এবং about-about-module.js ডাউনলোড করেছে যখন আপনি অ্যাপ্লিকেশনটি খুলবেন:

PreloadAllModules কর্মে কৌশল.

রাউটারটি মডিউলগুলির রুট ঘোষণাগুলিও নিবন্ধিত করে যাতে আপনি যখন প্রিলোড করা মডিউলগুলির সাথে যুক্ত একটি URL-এ নেভিগেট করেন, তখন রূপান্তরটি তাত্ক্ষণিক হয়৷

PreloadAllModules অনেক ক্ষেত্রে দরকারী। আপনার যখন কয়েক ডজন মডিউল থাকে, তবে এর আক্রমনাত্মক প্রিলোডিং সত্যিই নেটওয়ার্ক ব্যবহার বাড়াতে পারে। এছাড়াও, যেহেতু রাউটারকে সমস্ত প্রিলোড করা মডিউলগুলিতে রুটগুলি নিবন্ধন করতে হবে, এটি UI থ্রেডে নিবিড় গণনা ঘটাতে পারে এবং ব্যবহারকারীর অভিজ্ঞতাকে মন্থর করতে পারে।

কুইকলিংক লাইব্রেরি বৃহত্তর অ্যাপগুলির জন্য একটি ভাল কৌশল প্রদান করে। এটি পৃষ্ঠায় বর্তমানে দৃশ্যমান লিঙ্কগুলির সাথে যুক্ত শুধুমাত্র মডিউলগুলিকে প্রিলোড করতে IntersectionObserver API ব্যবহার করে৷

আপনি ngx-quicklink প্যাকেজ ব্যবহার করে একটি Angular অ্যাপে কুইকলিংক যোগ করতে পারেন। npm থেকে প্যাকেজ ইনস্টল করে শুরু করুন:

npm install --save ngx-quicklink

একবার এটি আপনার প্রকল্পে উপলব্ধ হলে, আপনি রাউটারের preloadingStrategy নির্দিষ্ট করে এবং QuicklinkModule আমদানি করে QuicklinkStrategy ব্যবহার করতে পারেন:

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

এখন আপনি যখন আবার অ্যাপ্লিকেশনটি খুলবেন, আপনি লক্ষ্য করবেন যে রাউটারটি শুধুমাত্র nyan-nyan-module.js প্রিলোড করে কারণ পৃষ্ঠার কেন্দ্রে থাকা বোতামটিতে একটি রাউটার লিঙ্ক রয়েছে৷ এবং যখন আপনি পাশের নেভিগেশন খুলবেন, আপনি লক্ষ্য করবেন যে রাউটারটি "সম্পর্কে" রুটটি প্রিলোড করে:

কুইকলিংক প্রিলোডিং কৌশলের একটি ডেমো।

উপরের উদাহরণটি একটি মৌলিক অ্যাপ্লিকেশনের জন্য কাজ করবে কিন্তু যদি আপনার অ্যাপ্লিকেশনটিতে একাধিক অলস-লোড মডিউল থাকে তবে আপনাকে একটি ভাগ করা মডিউলে QuicklinkModule আমদানি করতে হবে, এটি রপ্তানি করতে হবে এবং তারপর ভাগ করা মডিউলটি আপনার অলস-লোড মডিউলগুলিতে আমদানি করতে হবে।

প্রথমে আপনার ভাগ করা মডিউলে ngx-quicklink থেকে QuicklinkModule আমদানি করুন এবং এটি রপ্তানি করুন:

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

তারপরে আপনার সমস্ত অলস-লোড মডিউলগুলিতে আপনার SharedModule আমদানি করুন:

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

Quicklinks এখন আপনার অলস-লোড মডিউলগুলিতে উপলব্ধ হবে৷

বেসিক প্রিলোডিং এর বাইরে যাওয়া

Quicklink এর মাধ্যমে নির্বাচনী প্রিলোডিং উল্লেখযোগ্যভাবে নেভিগেশনের গতি বাড়াতে পারে, আপনি ভবিষ্যদ্বাণীমূলক প্রিলোডিং ব্যবহার করে আপনার প্রিলোডিং কৌশলকে আরও বেশি নেটওয়ার্ক দক্ষ করে তুলতে পারেন—যা Guess.js দ্বারা বাস্তবায়িত হয়। গুগল অ্যানালিটিক্স বা অন্য অ্যানালিটিক্স প্রদানকারীর একটি প্রতিবেদন বিশ্লেষণ করে, Guess.js একজন ব্যবহারকারীর নেভিগেশন যাত্রার পূর্বাভাস দিতে পারে এবং পরবর্তীতে প্রয়োজন হতে পারে এমন জাভাস্ক্রিপ্ট অংশগুলিই প্রিলোড করতে পারে।

আপনি Guess.js সাইট থেকে এই পৃষ্ঠায় Angular সহ Guess.js কীভাবে ব্যবহার করবেন তা শিখতে পারেন।

উপসংহার

রুট-লেভেল কোড স্প্লিটিং ব্যবহার করার সময় নেভিগেশনের গতি বাড়ানোর জন্য:

  1. আপনার আবেদনের আকারের উপর নির্ভর করে সঠিক প্রিলোডিং কৌশল বেছে নিন:
    • কয়েকটি মডিউল সহ অ্যাপ্লিকেশনগুলি Angular এর অন্তর্নির্মিত PreloadAllModules কৌশল ব্যবহার করতে পারে।
    • অনেক মডিউল সহ অ্যাপ্লিকেশনগুলির একটি কাস্টম প্রিলোডিং কৌশল ব্যবহার করা উচিত, যেমন কৌণিকের কুইকলিংক, বা অনুমানমূলক প্রিলোডিং, যেমন Guess.js এ প্রয়োগ করা হয়েছে।
  2. কৌণিক রাউটারের preloadStrategy বৈশিষ্ট্য সেট করে প্রিলোডিং কৌশলটি কনফিগার করুন।