روش‌های رایجی که عملکرد را در برنامه‌های Angular از بین می‌برند

توسعه برنامه های کاربردی با کارایی بالا با Angular نیازمند توجه به جزئیاتی است که اغلب نادیده گرفته می شوند. در اینجا چند روش متداول وجود دارد که می تواند عملکرد برنامه Angular شما را به همراه نمونه هایی از کدهای بد و اصلاحات آنها از بین ببرد.

1. Excessive Change Detection

کد بد:

تشخیص تغییر خیلی مکرر فعال می شود و بر عملکرد تأثیر می گذارد.

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

تصحیح:

در صورت امکان از استراتژی OnPush در کامپوننت ها استفاده کنید. این باعث می شود تشخیص تغییر تنها زمانی رخ دهد که ورودی مولفه تغییر کند.

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

2. Inefficient DOM Manipulation

کد بد:

دستکاری مستقیم DOM می تواند ناکارآمد و مدیریت آن سخت باشد.

ngAfterViewInit() {
  document.getElementById('elementId').style.color = 'blue';
}

تصحیح:

از Angular’s ​​Renderer2 برای دستکاری موثرتر DOM استفاده کنید.

import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) {}

ngAfterViewInit() {
  const element = this.renderer.selectRootElement('#elementId');
  this.renderer.setStyle(element, 'color', 'blue');
}

https://medium.com/@erick.98zanetti.98/common-practices-that-kill-performance-in-angular-applications-e0a25a5870cd

3. Overuse of Pipes

کد بد:

pipe هایی که عملیات سنگین را انجام می دهند را می توان به طور مکرر دوباره اجرا کرد که به عملکرد آسیب می رساند.

@Pipe({
  name: 'heavyPipe',
  pure: false
})
export class HeavyPipe implements PipeTransform {
  transform(value: any): any {
    // Heavy transformation logic
  }
}

تصحیح:

از pipeهای خالص (pure: true) برای عملیات سبک استفاده کنید یا از pipe برای عملیات سنگین اجتناب کنید.

@Pipe({
  name: 'heavyPipe',
  pure: true
})
export class HeavyPipe implements PipeTransform {
  transform(value: any): any {
    // Light transformation logic
  }
}

4. Excessive Initial Load

کد بد:

بارگیری همه ماژول ها و اجزا در زمان اولیه می تواند زمان بارگذاری را به تاخیر بیاندازد.

@NgModule({
  declarations: [AppComponent, FeatureComponent],
  imports: [BrowserModule, FeatureModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

تصحیح:

از lazy loading برای ماژول های که مورد نیاز نیستند.

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

5. Unmanaged Subscriptions

کد بد:

عدم لغو Subscriptions می تواند منجر به نشت(leaks) حافظه شود.

ngOnInit() {
  this.myService.myObservable.subscribe(value => {
    // Do something with value
  });
}

تصحیح:

از pipe async استفاده کنید یا اشتراک ها را با takeUntil یا Subscription مدیریت کنید.

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(private myService: MyService) {
    this.myService.getData()
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => {
        // Handle the data
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

نتیجه گیری

با پیروی از این اقدامات و اصلاحات، می توانید عملکرد برنامه Angular خود را به میزان قابل توجهی بهبود بخشید و آن را کارآمدتر و پاسخگوتر کنید.