1 – استفاده از get , set در ()Input بجای ngOnChanges. وقتی تعداد زیادی Input در ngOnChanges دارید، هر if باید چک شود.

 

 
// SLOWER when many ifs
ngOnChanges(changes: SimpleChanges) {
 const data: SimpleChange = changes.data;
 if (data && data.currentValue) {
   this.data = [...data.currentValue];
 }
 if (configuration && configuration.currentValue) {
   this.config = configuration.currentValue;
 }
}	



// FASTER



public _config: Config;
@Input('configuration')
set configuration(value: Config) {
 this._config = value;
}



get configuration(): Config {
 return this._config;
}



_data: Data;
@Input('data')
set data(value: Data) {
 this._data = [...value];
}



get data(): any[] {
 return this._data;
}

 

2 – stylePreprocessorOptions را در فایل angular.json اضافه کنید و دیگه نیازی به import کردن فایل های دیگر ندارید.

 

 
 "projects": {
   "project-frontend": {
     "root": "",
     "sourceRoot": "src",
     "projectType": "app",
     "architect": {
       "build": {
         "builder": "@angular-devkit/build-angular:browser",
         "options": {
           "stylePreprocessorOptions": { // <--- add this
             "includePaths": [
               "./src/assets/style/scss"
             ]
           }
         }
       }
     }
   }
  
 @import "variables";
  
 instead


 @import "../../assets/style/scss/variables";

 

3 – دستور npm audit را ماهی یک بار اجرا کنید، برای بررسی اینکه آیا کتابخانه ها آسیب پذیر هستند یا خیر. این به شما کمک می کند تا برنامه خود را امن نگه دارید.

 

if [[ $(npm audit | grep Critical -B3 -A10) != '' ]]; then exit 1; fi"

 

4 – برای اعتبارسنجی فرم به جای  this.form  که ممکن هست هنگام چک کردن محتوای فرم مقداردهی اولیه نشود از parent استفاده کنید.

 

 
// Correct 



static validateEndDate(fc: FormControl) {
 const startDate = fc.parent.get(FORM_PARAMS.startDate);
 if (startDate.value) {
   const diff = fc.value - startDate.value;
   return (diff < 86400) ? { endDateInvalid: true } : null;
 }
 return null;
}



// Incorrect 



static validateEndDate(fc: FormControl) {
 const startDate = this.form.get(FORM_PARAMS.startDate);
 if (startDate.value) {
   const diff = fc.value - startDate.value;
   return (diff < 86400) ? { endDateInvalid: true } : null;
 }
 return null;
}

 

5 – از دستور webpack-bundle-analyzer استفاده کنید. این به شما در تشخیص ماژول هایی که حجم شان به سرعت زیاد می شود کمک می کند. در این case به اشتباه main.scss به جای variable.scss در فایل دیگری گنجانده شده است. اندازه bundle اپلیکیشن دو برابر شده است!

 

 
"scripts": {
   "bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"
},
93f72404-b338-11e6-92d4-9a365550a701.gif
Gif Source: https://github.com/webpack-contrib/webpack-bundle-analyzer

 

6 – از آزمونهای عملکرد مرورگر استفاده کنید. زمان ارائه 17 میلی ثانیه به معنای استفاده از 60 فریم در ثانیه است. اقداماتی با سرعت کمتر از 60 فریم در ثانیه و بیشتر از 30 فریم در ثانیه مشکلی ندارند. هر سرعتی کمتر از 30 فریم در ثانیه باعث می شود کاربر متوجه کاهش سرعت بصری برنامه شود.

7 – برای پیگیری وضعیت کنونی کامپوننت ها از افزونه chrome augury استفاده کنید.

8 – از یک لیست پیمایش مجازی مانند CDK Virtual Scroll هنگامی که نیاز به نمایش مجموعه ای بسیار بزرگ از رکوردها استفاده کنید. این فقط مواردی را که در ViewPort قرار دارند در موقعیت پیمایش فعلی render می کند، در مقایسه با اینکه همه موارد را یکجا بدون مجازی سازی ارائه دهید.

 

import { ScrollingModule } from '@angular/cdk/scrolling';
 
@NgModule({
 ...,
 imports: [
   ...,
   ScrollingModule
 ],
 ...,
})
export class AppModule { }
 
@Component({
 template: `

{{item.id}}

 `,
})
export class SampleComponent {
 constructor() {
   for (let index = 0; index < 10000; index++) {
     this.items.push({ id: index });
   }
 }
 trackByFn(index, item) {
   return item.id;
 }
}

 

9 – برای استفاده از +Angular v9  ، از فلگ ngZoneEventCoalescing برای کاهش میزان چرخه های تشخیص تغییر در حین Event Bubbling استفاده کنید.

 

platformBrowserDynamic()
 .bootstrapModule(AppModule, { ngZoneEventCoalescing: true })
 .catch(err => console.error(err));

 

10 – همیشه به اندازهbundle  خود توجه داشته باشید. بسته به مقیاس پروژه شما ،بستگی دارد.  در برنامه های سازمانی فایل main بیش از 0.5 مگابایت است ، ممکن است باید هشیار باشید ! بعد از استقرار برنامه Angular ، بررسی کنید که آیا بستر ابری یا CDN شما ، میزبان اپلیکیشن شماست. در تب  network  در Response Headers ، باید عنوان را مشاهده کنید: “Content-Encoding: gzip.” اگر سرور اختصاصی برای برنامه خود دارید و از فشرده سازی gzip استفاده نمی کند ، قطعاً باید آن را اضافه کنید.

منبع : espeo.eu

 

bit.ly | tiny

Angular angular tricks Application PWA web app web application