10 بهترین روش برای بهینه سازی عملکرد زاویه ای

بهینه سازی عملکرد برنامه Angular برای ارائه یک تجربه کاربری روان بسیار مهم است. در اینجا 10 بهترین روش برای کمک به شما برای استفاده حداکثری از برنامه های Angular آورده شده است.

لطفا برای حمایت از کانال من و دریافت آموزش های بیشتر توسعه وب، در کانال یوتیوب من مشترک شوید.

1. OnPush Change Detection Strategy 🧠

به طور پیش فرض، Angular از Default استراتژی تشخیص تغییر، که تمام اجزا را برای تغییرات بررسی می کند. با استفاده از OnPush استراتژی تعداد چک ها را تنها با بررسی مولفه ها زمانی که ورودی های آنها تغییر می کند کاهش می دهد.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() data: any;
}

2. از TrackBy با ngFor 🔄 استفاده کنید

استفاده كردن trackBy که در ngFor به Angular کمک می کند تا موارد موجود در یک لیست را شناسایی کند و تعداد دستکاری های DOM را کاهش دهد.

 *ngFor="let item of items; trackBy: trackByFn">
  {{ item.name }}

trackByFn(index, item) {
  return item.id;
}

3. ماژول های بارگذاری تنبل 📦

ماژول‌های بارگذاری تنبل تضمین می‌کنند که فقط قسمت‌های ضروری برنامه شما بارگذاری می‌شوند و زمان بارگذاری اولیه را کاهش می‌دهند.

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

4. بهینه سازی عبارات قالب 🖋️

از محاسبات پیچیده و فراخوانی تابع در عبارات الگو خودداری کنید. در عوض، مقادیر را در کلاس کامپوننت محاسبه کرده و به قالب متصل کنید.

{{ computeHeavyTask() }}


{{ computedValue }}

ngOnInit() {
  this.computedValue = this.computeHeavyTask();
}

5. از AOT Compilation استفاده کنید 🛠️

کامپایل Ahead-of-Time (AOT) قالب ها و مؤلفه های Angular شما را از قبل کامپایل می کند که منجر به رندر سریعتر و اندازه بسته های کوچکتر می شود.

ng build --prod --aot

6. بهینه سازی سبک ها و اسکریپت ها در حال بارگیری 🎨

سبک ها و اسکریپت ها را به صورت مشروط بارگذاری کنید تا بار اولیه کاهش یابد. استفاده کنید ngStyle و ngClass برای یک ظاهر طراحی مشروط

 [ngClass]="{'class-a': conditionA, 'class-b': conditionB}">

7. از Pure Pipes برای تبدیل داده استفاده کنید 📊

لوله‌های خالص بدون حالت هستند و تنها زمانی دوباره محاسبه می‌شوند که آرگومان‌های ورودی آن‌ها تغییر کند و کارآمدتر از لوله‌های ناخالص باشد.

@Pipe({ name: 'purePipe', pure: true })
export class PurePipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    // Transformation logic
  }
}

8. استفاده از کتابخانه های شخص ثالث را به حداقل برسانید

فقط شامل کتابخانه های شخص ثالث ضروری و حذف موارد استفاده نشده. این باعث کاهش اندازه بسته و بهبود زمان بارگیری می شود.

npm prune

9. بهینه سازی تصاویر و دارایی ها 🖼️

برای بهبود عملکرد از تصاویر بهینه استفاده کنید و آنها را با تنبلی بارگذاری کنید. ابزارهایی مانند ImageOptim یا خدمات آنلاین می توانند به کاهش اندازه تصویر کمک کنند.

 [src]="imageSrc" loading="lazy" />

10. اجتناب از نشت حافظه 🧹

برای جلوگیری از نشت حافظه، اشتراک در Observables را لغو کنید و شنوندگان رویداد را جدا کنید.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent implements OnDestroy {
  private subscription: Subscription;

  ngOnInit() {
    this.subscription = this.myService.getData().subscribe();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

با پیروی از این بهترین شیوه ها، می توانید عملکرد برنامه های Angular خود را بهینه کنید و تجربه بهتری را برای کاربران خود فراهم کنید. کد نویسی مبارک! 🚀

نظرات یا سوالات خود را در زیر مطرح کنید. اگر این راهنما برای شما مفید بود، لطفاً آن را با همتایان خود به اشتراک بگذارید و برای آموزش های بیشتر توسعه وب، من را دنبال کنید. کد نویسی مبارک!

فالو کنید و مشترک شوید: