بهینه سازی عملکرد زاویه ای: تکنیک ها و استراتژی ها

در توسعه وب مدرن ، عملکرد بالا برای ارائه یک تجربه کاربر یکپارچه بسیار مهم است. Angular ، با چارچوب جامع خود ، روش های بی شماری برای بهینه سازی عملکرد ارائه می دهد. با این حال ، بهینه سازی یک برنامه زاویه ای برای تولید نیاز به درک عمیق تر از داخلی چارچوب و استفاده صحیح از تکنیک های پیشرفته دارد. در این مقاله مؤثرترین استراتژی ها برای تقویت عملکرد در برنامه های زاویه ای ، کامل با نمونه های پیشرفته کد ، ارائه می شود.

1. استراتژی های تشخیص را تغییر دهید

تشخیص پیش فرض تغییر

مکانیسم تشخیص تغییر پیش فرض Angular در هنگام تشخیص هرگونه تغییر ، کل درخت مؤلفه را مجدداً ارزیابی می کند. این می تواند به ویژه در برنامه های بزرگ با مؤلفه های بی شماری ، منابع بسیار زیاد باشد.

برای درک مشکل ، بیایید مثال زیر را در نظر بگیریم:

@Component({
  selector: 'app-parent',
  template: `
    
  `
})
export class ParentComponent {
  parentData = { name: 'Soumaya', age: 33 };

  updateData() {
    this.parentData.age += 1;
  }
}

در استراتژی پیش فرض ، Angular Runs تغییر را تغییر می دهد app-child هر بار که هر تغییری اتفاق می افتد app-parent، صرف نظر از اینکه داده ها به آن منتقل شده اند app-child تغییر کرده است این می تواند منجر به تخریب عملکرد شود.

بهینه سازی با OnPush

با استفاده از OnPush استراتژی تشخیص را تغییر دهید ، می توانید این چک ها را محدود کنید. OnPush اگر ورودی های مؤلفه با مرجع تغییر کنند ، فقط تغییر را تغییر می دهد.

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

با این حال ، OnPush با احتیاط همراه است. در هنگام استفاده از اشیاء پیچیده یا آرایه ها به عنوان ورودی ، Angular در صورت جهش شیء بدون تغییر مرجع آن ، تغییرات را تشخیص نمی دهد. به عنوان مثال ، این باعث تشخیص تغییر نمی شود:

updateData() {
  this.parentData.age += 1; // Change detection won't run
}

در عوض ، شما باید یک شی جدید را برگردانید:

updateData() {
  this.parentData = { ...this.parentData, age: this.parentData.age + 1 }; // Change detection triggers
}

استفاده پیشرفته: تشخیص تغییر دستی

برای موارد پیشرفته که نه پیش فرض و نه OnPush استراتژی ها مناسب هستند ، شما می توانید از کنترل تشخیص تغییر دستی استفاده کنید ChangeDetectorRefبشر

export class ChildComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  manualCheck() {
    this.cdr.detectChanges(); // Trigger change detection manually
  }
}

این روش زمانی مفید است که شما کنترل گرانول بیشتری بر هنگام تشخیص تغییر داشته باشید ، به عنوان مثال ، در برنامه های با کارایی بالا مانند بازی یا داشبورد مالی در زمان واقعی.

2 سیگنال های زاویه ای

سیگنال های زاویه ای پارادایم جدیدی را برای مدیریت واکنش پذیری در برنامه های زاویه ای ارائه می دهند. سیگنال ها به شما امکان می دهند به صورت دستی کنترل کنید که چگونه و هنگامی که قسمت های خاصی از برنامه شما باید به روز شود ، منجر به عملکرد بهتر و به روزرسانی های UI قابل پیش بینی تر می شود.

اجرای سیگنال ها

با سیگنال ها ، می توانید با اتصال مستقیم دولت به UI ، به طور کامل از تشخیص به طور کامل جلوگیری کنید.

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

const counter = signal(0);

@Component({
  selector: 'app-counter',
  template: `
    Increment
    
{{ counter() }}
  `
})
export class CounterComponent {
  increment() {
    counter.set(counter() + 1);
  }
}

در این مثال ، counter() عملکرد فقط هنگامی که مقدار تغییر می کند ، به روز می شود و با استفاده از نیاز به تشخیص تغییر زاویه ای سنتی به طور کلی. این منجر به بهبود عملکرد قابل توجهی در مواردی می شود که به UI های فوق العاده پاسخگو نیاز دارید.

استفاده از سیگنال های پیشرفته: وضعیت مشتق

همچنین می توانید سیگنال های مشتق شده ای ایجاد کنید که به سایر سیگنال ها بستگی دارد ، و در عین حال عملکرد بالایی را نیز فراهم می کند.

const firstName = signal('Soumaya');
const lastName = signal('Erradi');

const fullName = signal(() => `${firstName()} ${lastName()}`);

@Component({
  selector: 'app-name-display',
  template: `
{{ fullName() }}
`
})
export class NameDisplayComponent {
  updateFirstName(newName: string) {
    firstName.set(newName);
  }
}

در اینجا fullName مشتق شده از firstName وت lastName، اما فقط هنگامی که یکی از این مقادیر تغییر می کند ، محاسبه می شود و از محاسبه مجدد غیر ضروری جلوگیری می کند.

3. قطعات مستقل بارگذاری تنبل

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

قطعات مستقل بارگذاری تنبل با واردات پویا

در حالی که بارگذاری تنبل با ماژول ها متداول است ، Angular 14 توانایی بار تنبل را معرفی می کند اجزای مستقل با استفاده از واردات پویا.

const routes: Routes = [
  {
    path: 'lazy',
    loadComponent: () => import('./lazy/lazy.component').then(m => m.LazyComponent)
  }
];

این رویکرد بارگیری می کند LazyComponent فقط وقتی کاربر به /lazy مسیر. با این حال ، بارگذاری تنبل با ترکیب آن می تواند بیشتر بهینه شود استراتژی های پیش بارگذاری، اطمینان از بارگیری اجزای اصلی در پس زمینه در هنگام وجود پهنای باند شبکه.

استراتژی پیش بارگذاری برای مؤلفه های مهم

در مواردی که می خواهید اجزای ضروری را بدون مسدود کردن موضوع اصلی بارگذاری کنید ، می توانید از استراتژی پیش بارگذاری داخلی Angular استفاده کنید:

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

این استراتژی تضمین می کند که اجزای مهم بدون تأثیر بر تجربه کاربر ، به صورت ناهمزمان بارگذاری می شوند ، بنابراین عملکرد را برای بارهای صفحه بعدی بهینه می کنند.

4. به حداقل رساندن درخواست های HTTP

کاهش تعداد درخواست های HTTP برای بهینه سازی عملکرد شبکه ضروری است. Angular چندین ابزار داخلی برای کمک به ذخیره ، دسته بندی و کاهش تماس های API اضافی فراهم می کند.

استراتژی ذخیره سازی با رهگیری ها

یکی از راه های رسیدگی به حافظه پنهان استفاده از یک رهگیر HTTP است. این امر به شما امکان می دهد تا نتایج درخواست های HTTP را ذخیره کرده و در صورت وجود داده های ذخیره شده را ارائه دهید و تعداد تماس های واقعی شبکه را کاهش دهید.

@Injectable()
export class CacheInterceptor implements HttpInterceptor {
  private cache = new Map<string, any>();

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.method !== 'GET') {
      return next.handle(req); // Only cache GET requests
    }

    const cachedResponse = this.cache.get(req.url);
    if (cachedResponse) {
      return of(cachedResponse);
    }

    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          this.cache.set(req.url, event);
        }
      })
    );
  }
}

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

درخواست های API و لرزان

در بعضی موارد ، مانند میله های جستجو یا پیمایش نامحدود ، ممکن است بخواهید فرکانس درخواست های HTTP را محدود کنید. می توانید استفاده کنید debounceTime یا throttleTime از rxjs برای انجام این کار

import { debounceTime, switchMap } from 'rxjs/operators';
import { Subject } from 'rxjs';

searchTerm$ = new Subject<string>();

this.searchTerm$.pipe(
  debounceTime(300), // Wait for 300ms of inactivity
  switchMap(term => this.http.get(`/api/search?query=${term}`))
).subscribe(results => {
  this.searchResults = results;
});

این پیاده سازی تضمین می کند که درخواست جستجو فقط پس از متوقف کردن تایپ 300ms ، کاهش تماس های API غیر ضروری و بهبود کارایی شبکه ایجاد می شود.

5. رندر سمت سرور (SSR)

رندر سمت سرور (SSR) به طور مستقیم در چارچوب ساخته می شود و باعث می شود با ارائه صفحات روی سرور ، عملکرد و بهبود سئو را آسان تر کنید. این رویکرد منجر به بارهای سریع تر صفحه ، به ویژه برای برنامه های سنگین محتوا می شود و تضمین می کند که برنامه شما برای موتورهای جستجو بیشتر باشد.

تنظیم SSR

در اینجا نحوه پیکربندی آن آورده شده است:

1. یک برنامه زاویه ای جدید با SSR فعال کنید:

   ng new angular-ssr-app --standalone --server

این دستور یک برنامه زاویه ای جدید را با SSR از پیش تنظیم شده و آماده برای رفتن تنظیم می کند.

1. برنامه SSR را بسازید و خدمت کنید:

پس از تنظیم برنامه خود ، آن را برای SSR با استفاده از:

   ng build --ssr

برای ارائه نسخه SSR به صورت محلی:

   npm run dev:ssr

این دستور برنامه زاویه ای شما را با رندر سمت سرور اجرا می کند ، و اطمینان می دهد که سرور HTML از پیش ارائه شده را برای اولین بار سریعتر و سئو بهبود یافته به مرورگر ارسال می کند.

بهینه سازی SSR برای عملکرد

SSR را می توان با استفاده از تکنیک های پیشرفته مانند پیش بارگذاری مسیر ، CSS Critical Insing و به تعویق انداختن اسکریپت های غیر ضروری برای بهبود عملکرد درک شده ، بیشتر کرد.

• پیش بارگذاری مسیرهای بحرانی: اطمینان حاصل کنید که مسیرهای ضروری برای تعامل کاربر بر روی سرور از قبل بارگذاری شده اند و به کاربران امکان می دهد بلافاصله با بخش های کلیدی برنامه شما ارتباط برقرار کنند.
• CSS Critical Inlining: با وارد کردن CSS مورد نیاز برای محتوای بالاتر ، شما منابع مسدود کننده رندر را کاهش می دهید و زمان بار درک شده را بهبود می بخشید. این کار می تواند به عنوان بخشی از فرآیند ارائه SSR انجام شود تا فقط سبک های مورد نیاز برای صفحه اولیه را شامل شود.

مثال: پیش بارگذاری مسیرهای کلیدی و بارگیری تنبل قطعات غیر ضروری

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: { preload: true }
  },
  {
    path: 'lazy',
    loadComponent: () => import('./lazy/lazy.component').then(m => m.LazyComponent)
  }
];

با بارگذاری مسیرهای مهم مانند صفحه اصلی و بارگیری تنبل اجزای غیر ضروری ، می توانید بین زمان بار اولیه سریع و استفاده از منابع بهینه تعادل برقرار کنید.

ذخیره سازی سرور پیشرفته برای SSR

برای بهینه سازی بیشتر عملکرد ، حافظه پنهان سمت سرور را برای صفحات متداول درخواست کنید. این به سرور شما اجازه می دهد تا به جای بازسازی آن برای هر درخواست ، از HTML از پیش ارائه شده استفاده مجدد کند و زمان پاسخ را به طرز چشمگیری کاهش می دهد.

6. تکنیک های بهینه سازی کد: AOT ، ارزیابی تنبل و موارد دیگر

ترکیب AOT

تدوین پیش از زمان (AOT) یک ویژگی زاویه ای است که در مرحله ساخت الگوهای قبل از ترکیبات را انجام می دهد. این باعث می شود میزان کارهایی که مرورگر باید در زمان اجرا انجام دهد ، باعث بهبود عملکرد شود.

ng build --aot

AOT تضمین می کند که کشتی های کاربردی شما بسته های جاوا اسکریپت بهینه شده و کوچکتر را به مشتری تبدیل کرده و آن را به یکی از ساده ترین راه ها برای سرعت بخشیدن به برنامه زاویه ای خود تبدیل می کند.

تقسیم کد پیشرفته با واردات پویا

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

import('./heavy-module/heavy-module.component').then(m => m.HeavyModule);

این تضمین می کند که فقط در صورت نیاز به مؤلفه ، بارگیری و اجرا می شود.

اجتناب از عملیات گران قیمت

الگوهای زاویه ای غالباً جایی هستند که مشکلات عملکرد ایجاد می شود. از منطق سنگین در قالب ها خودداری کنید و در عوض محاسبات پیچیده را به کلاس جزء واگذار کنید یا استفاده کنید ngOnInitبشر

export class AppComponent {
  result: number;

  ngOnInit() {
    this.result = this.calculateComplexOperation();
  }

  calculateComplexOperation() {
    // Expensive operation here
    return ...;
  }
}

با محاسبه داده های قبل از محاسبه در کلاس مؤلفه ، از محاسبه مجدد آن در هر چرخه تشخیص تغییر ، به طور قابل توجهی عملکرد را بهبود می بخشید.

پایان

Angular ابزارهای زیادی برای بهینه سازی عملکرد فراهم می کند ، اما تکنیک های پیشرفته مانند سیگنال ها ، تشخیص تغییر دستی ، SSR و ذخیره با رهگیری ها می توانند بهینه سازی های شما را به سطح بعدی برسانند. ترکیب این استراتژی ها به شما امکان می دهد برنامه های زاویه ای سریع ، مقیاس پذیر و بسیار عملکردی را ایجاد کنید که تجربه کاربری بهتری را ارائه می دهند. به طور مرتب عملکرد را با استفاده از ابزارهایی مانند Chrome Devtools و Lighthouse برای شناسایی تنگناها و اطمینان از بهینه سازی های شما ، نظارت کنید.