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

১. Change Detection Strategy

Angular-এর Change Detection মেকানিজম আপনার কম্পোনেন্টগুলির ভিউ আপডেট করার জন্য কাজ করে। তবে, প্রতিটি ইন্টারঅ্যাকশনের জন্য পুরো কম্পোনেন্ট ট্রি চেক করা হলে পারফরম্যান্সে প্রভাব পড়তে পারে।

OnPush Change Detection

OnPush স্ট্রাটেজি ব্যবহার করলে Angular শুধুমাত্র সেই কম্পোনেন্ট বা ভিউ আপডেট করবে যেগুলোর ইনপুট প্রপার্টি বা স্টেট পরিবর্তন হয়েছে। এটি কম্পোনেন্টের পারফরম্যান্স উন্নত করতে সাহায্য করে।

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush  // Use OnPush strategy
})
export class MyComponent {
  // Component code here
}

এটি default স্ট্রাটেজির চেয়ে অনেক দ্রুত কাজ করে, কারণ Angular কম্পোনেন্টের জন্য চেঞ্জ ডিটেকশন চালানোর পরিবর্তে শুধুমাত্র প্রাসঙ্গিক অংশগুলো চেক করে।

২. Lazy Loading

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

Lazy Loading কনফিগারেশন

app-routing.module.ts-এ মডিউলগুলো lazy load করতে পারেন:

const routes: Routes = [
  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
];

এখানে FeatureModule কেবল তখনই লোড হবে যখন ব্যবহারকারী feature রুটে যাবে, অন্যথায় এটি অ্যাপ্লিকেশনের প্রথম লোডিং সময়ে লোড হবে না।

৩. Track By with *ngFor

Angular-এ *ngFor ডিরেক্টিভ ব্যবহার করার সময়, প্রতিটি এলিমেন্টের জন্য DOM রেন্ডারিং এবং চেঞ্জ ডিটেকশন চালানো হয়। যদি আপনার লিস্ট বড় হয়, তবে এটি পারফরম্যান্সে প্রভাব ফেলতে পারে। TrackBy ব্যবহার করে আপনি Angular-কে জানাতে পারেন কোন এলিমেন্টটি পরিবর্তিত হয়েছে, যাতে Angular সঠিকভাবে ডোম আপডেট করতে পারে।

Track By উদাহরণ

<ul>
  <li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
</ul>

trackById(index: number, item: any): number {
  return item.id;  // Return unique identifier for each item
}

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

৪. Avoiding Implicit Any Types

যখন TypeScript এ any টাইপ ব্যবহার করা হয়, তখন Angular এর টাইপ চেকিং অক্ষম হয়, যার ফলে কম্পাইল টাইমে কোনো ত্রুটি ধরা পড়ে না। এটি পারফরম্যান্সের ওপর নেতিবাচক প্রভাব ফেলতে পারে, কারণ টাইপ সঠিকভাবে নির্ধারণ না করলে, Angular সঠিকভাবে অপটিমাইজ করতে পারে না।

সঠিক টাইপ ব্যবহার

let user: User = { id: 1, name: 'John Doe' };

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

৫. AOT (Ahead-of-Time) Compilation

AOT (Ahead-of-Time) Compilation Angular এর একটি ফিচার, যা অ্যাপ্লিকেশনের কোডকে compile করার পরেই ব্রাউজারে পাঠায়। AOT ব্যবহারের ফলে অ্যাপ্লিকেশনটি দ্রুত লোড হয় কারণ ব্রাউজারে কোড কম্পাইল করার প্রয়োজন হয় না। Angular CLI ডিফল্টভাবে AOT সমর্থন করে।

AOT কম্পাইলেশন চালু করা

ng build --prod

এটি AOT কম্পাইলেশন সক্রিয় করে এবং প্রোডাকশন পরিবেশের জন্য অ্যাপ্লিকেশন তৈরি করে, যা পারফরম্যান্স উন্নত করে।

৬. Optimize Bundle Size

অ্যাপ্লিকেশনের bundle size কমাতে হলে কিছু টেকনিক অবলম্বন করা উচিত:

• Tree Shaking: Angular CLI ডিফল্টভাবে tree shaking করে, যার মাধ্যমে অপ্রয়োজনীয় কোড ডিলিট করা হয়।
• Bundle Optimization: ng build --prod কমান্ডের মাধ্যমে প্রোডাকশন বিল্ড তৈরি করলে এটি কোড মিনিফিকেশন এবং কম্প্রেশন সম্পাদন করে, যা bundle size কমাতে সাহায্য করে।

৭. Server-Side Rendering (SSR) with Angular Universal

Angular Universal হল একটি Angular অ্যাপ্লিকেশনের Server-Side Rendering (SSR) টুল, যা অ্যাপ্লিকেশনের প্রথম লোডিং সময়ে সার্ভার থেকে HTML রেন্ডার করে পাঠায়, ফলে ব্যবহারকারীর জন্য দ্রুত লোডিং এবং SEO উন্নত হয়।

Angular Universal সেটআপ

Angular Universal ব্যবহার করতে Angular CLI দিয়ে নতুন একটি Universal অ্যাপ্লিকেশন তৈরি করা হয়:

ng add @nguniversal/express-engine

এরপর, অ্যাপ্লিকেশনটি সার্ভার থেকে রেন্ডার করার জন্য কনফিগারেশন করা যাবে।

৮. Debouncing and Throttling

কিছু ইভেন্ট (যেমন, ইনপুট ফিল্ডে টাইপ করা, স্ক্রোলিং ইত্যাদি) যদি খুব দ্রুত ঘটে, তবে এটি অ্যাপ্লিকেশনের পারফরম্যান্সে নেতিবাচক প্রভাব ফেলতে পারে। Debouncing এবং Throttling ব্যবহার করে আপনি এই ধরনের ইভেন্টগুলোকে সীমাবদ্ধ করতে পারেন।

RxJS Debounce Example

import { debounceTime } from 'rxjs/operators';

this.searchInput.valueChanges.pipe(
  debounceTime(300)  // Wait for 300ms after last input
).subscribe(value => {
  this.search(value);
});

এটি ইনপুট ফিল্ডে টাইপ করা হলে ইভেন্টগুলোকে ডিবাউন্স করে এবং শুধুমাত্র শেষ টাইপিংয়ের পরে সার্চ ফাংশন কল করবে।

সারাংশ

Angular অ্যাপ্লিকেশনের পারফরম্যান্স অপটিমাইজেশন একটি গুরুত্বপূর্ণ পদক্ষেপ, যা অ্যাপ্লিকেশনটির দ্রুত লোডিং এবং সঠিকভাবে কাজ করার জন্য অপরিহার্য। সঠিক চেঞ্জ ডিটেকশন স্ট্রাটেজি, lazy loading, track by, AOT কম্পাইলেশন, bundle optimization, SSR, এবং debouncing এর মতো টেকনিকগুলি ব্যবহারের মাধ্যমে আপনি Angular অ্যাপ্লিকেশনের পারফরম্যান্স অনেক উন্নত করতে পারবেন।