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

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

1 بار تنبل (بارگذاری تنبل)

چیه؟

به جای بارگیری همه ماژول ها به طور همزمان ، Angular اجازه می دهد تا ماژول ها فقط در صورت لزوم بارگیری شوند. این باعث افزایش زمان بار اولیه برنامه می شود.

چگونه آن را انجام دهیم؟

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

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

نتیجه:

برنامه شما بسیار سریعتر بارگیری می شود و کاربران مجبور نیستند در قسمت هایی منتظر بمانند که بلافاصله از آنها استفاده نمی کنند!

2 بهینه سازی تصاویر و منابع استاتیک

چرا مهم است؟

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

چگونه بهینه سازی کنیم؟

از ابزارهایی مانند استفاده کنید ImageOptimبا TinyPNG یا به سادگی قالب تصاویر را به وب تغییر دهید ، که بسیار سبک تر است.

 src="assets/images/mi-imagen.webp" alt="Descripción de la imagen">

3 استفاده صحیح از تغییر مکانیک

تغییر stecticnstrategy چیست؟

Angular به طور خودکار تغییرات در داده های مؤلفه را تأیید می کند و در صورت لزوم DOM را به روز می کند. اگر این روند را کنترل نکنیم ، می توانیم با عملکرد کم به پایان برسیم.

چگونه بهینه سازی کنیم؟

ایالات متحده آمریکا ChangeDetectionStrategy.OnPush به طوری که زاویه ای فقط در صورت لزوم تغییرات تغییرات را ایجاد می کند ، یعنی وقتی ورودی های اجزای تغییر می کند.

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

4 اندازه گیری کد و فشرده سازی

چرا باید این کار را انجام دهید؟

کد غیر بهینه سازی شده می تواند سنگین باشد. پرونده های JavaScript و CSS را نه تنها اندازه آنها کاهش می دهد ، بلکه روند بار را نیز تسریع می کند.

چگونه آن را پیاده سازی کنیم؟

اطمینان حاصل کنید که پیکربندی زاویه ای شما برای تولید فعال است. Angular CLI این کار را برای شما هنگام اجرای انجام می دهد ng build --prodبشر

نتیجه:

برنامه شما برای بارگیری سبک تر و سریعتر خواهد بود.

نتیجه گیری:

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