Angular 性能優(yōu)化實(shí)戰(zhàn)

Angular 是一個(gè)非常強(qiáng)大的前端框架，但是如果不注意性能優(yōu)化，應(yīng)用程序可能會(huì)變得非常慢并增加加載時(shí)間。
以下是一些Angular性能優(yōu)化經(jīng)驗(yàn)的實(shí)戰(zhàn)建議：

1. 使用 OnPush 變更檢測策略

默認(rèn)情況下，Angular檢查應(yīng)用程序中發(fā)生的所有數(shù)據(jù)更改，從而導(dǎo)致性能下降。為了解決這個(gè)問題，可以使用OnPush變更檢測策略，這將只在輸入綁定值發(fā)生更改時(shí)才啟動(dòng)變更檢測。這個(gè)策略只適用于具有@Input() properties的組件，并且需要手動(dòng)設(shè)置。

import {Component, ChangeDetectionStrategy} from '@angular/core';

@Component({
    selector: 'app-sample-component',
    templateUrl: './sample.component.html',
    styleUrls: ['./sample.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class SampleComponent {
    // ...
}

定義一個(gè)組件并設(shè)置 changeDetection 選項(xiàng)為 OnPush ，如上所述。

2. 使用輕量級(jí)的管道

Angular中的管道可以用來轉(zhuǎn)換數(shù)據(jù)，并在模板中顯示不同的輸出。使用輕量級(jí)的管道可以提高Angular應(yīng)用的性能。

一個(gè)經(jīng)典的例子是將日期格式化為特定的字符串形式。我們可以使用內(nèi)置的DatePipe管道來實(shí)現(xiàn)這一點(diǎn)，但是它可能會(huì)導(dǎo)致性能問題。相反，我們可以編寫一個(gè)自定義的輕量級(jí)管道來執(zhí)行相同的任務(wù)：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customDate'
})
export class CustomDatePipe implements PipeTransform {
  transform(value: any): string {
    const date = new Date(value);
    return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
  }
}

在模板中使用這個(gè)自定義管道：

<p>{{ myDate | customDate }}</p>

在 Angular 中使用管道來轉(zhuǎn)換數(shù)據(jù)是很方便的，但是需要注意的是，某些管道可能會(huì)對性能產(chǎn)生負(fù)面影響。建議遵循以下規(guī)則使用輕量級(jí)的管道：

• 盡可能使用純管道： 純管道指輸入不變時(shí)，輸出永遠(yuǎn)不變的管道，它們只在輸入發(fā)生變化時(shí)進(jìn)行計(jì)算，在模板中綁定的表達(dá)式將不會(huì)多次被執(zhí)行。
• 避免使用復(fù)雜管道： 復(fù)雜管道需要更多的計(jì)算資源，因此應(yīng)該盡可能避免使用它們。當(dāng)您必須使用復(fù)雜管道時(shí)，應(yīng)該將其結(jié)果緩存起來，以便在需要時(shí)可以重用它們。

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'uppercase'})
export class UpperCasePipe implements PipeTransform {
    transform(value: string): string {
        return value.toUpperCase();
    }
}

這樣做的好處是這個(gè)自定義管道沒有過多的附加操作或計(jì)算，因此它比內(nèi)置的DatePipe稍微快一些，從而提高了整個(gè)應(yīng)用程序的性能。

3. 使用懶加載模塊

在 Angular 中，懶加載模塊可以幫助你分割應(yīng)用程序并提高加載時(shí)間。使用懶加載模塊可以將某些代碼推遲到用戶需要時(shí)才加載。

為了使模塊成為懶加載模塊，你需要在路由中使用 loadChildren 而不是 component 屬性。

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

4. 使用 trackBy 幫助 ngFor 優(yōu)化

當(dāng)使用 ngFor 循環(huán)渲染數(shù)組或列表時(shí)，如果數(shù)據(jù)發(fā)生變化，“臟檢查”機(jī)制會(huì)觸發(fā)重新渲染所有列表項(xiàng)。

通過使用 trackBy 函數(shù)，可以告訴 Angular 如何跟蹤列表項(xiàng)的變化，從而避免不必要的渲染。

<ul>
  <li *ngFor="let item of items; trackBy: itemTrackByFn">{{ item }}</li>
</ul>

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

5. 避免在引用類型中改變對象的屬性

在 Angular 應(yīng)用程序中，通過在組件和服務(wù)之間傳遞引用類型，可以輕松地共享數(shù)據(jù)。

但是，如果你試圖修改已經(jīng)在其他地方使用的對象的屬性，則所有對該對象的引用都將受到影響，這可能導(dǎo)致不必要的變更檢測。

為了避免這種情況，盡量避免直接修改對象的屬性，而是使用 Object.assign() 或 spread 運(yùn)算符創(chuàng)建新對象。

const user = { id: 1, name: 'John Doe', email: 'john@example.com' };

// 不好的寫法
this.userService.updateUser(user.id, user.name);
user.email = 'new-email@example.com';

// 好的寫法
this.userService.updateUser(user.id, user.name, { email: 'new-email@example.com' });

6. 使用虛擬滾動(dòng)

當(dāng)你需要處理大量數(shù)據(jù)時(shí)，虛擬滾動(dòng)可以幫助你實(shí)現(xiàn)快速、流暢的滾動(dòng)體驗(yàn)，而無需渲染整個(gè)列表。

Angular CDK 提供了一個(gè)名為 CdkVirtualScrollViewport 的指令，它可以幫助你實(shí)現(xiàn)虛擬滾動(dòng)。

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

以上是一些 Angular 性能優(yōu)化的實(shí)戰(zhàn)，其中一些技術(shù)可以單獨(dú)應(yīng)用，同時(shí)使用全部技巧可以幫助你最大程度地提高 Angular 應(yīng)用程序的性能并改善用戶體驗(yàn)。

7. 開啟 AOT 編譯

開啟 AOT 編譯可以大大提高應(yīng)用程序的性能。AOT 編譯將在構(gòu)建期間對組件/指令和模板進(jìn)行編譯，并將生成的 JavaScript 代碼直接注入到 HTML 模板中。這意味著在運(yùn)行時(shí)，瀏覽器不再需要編譯模板，從而減少啟動(dòng)時(shí)間和加載時(shí)間。

具體來說，以下是如何開啟 AOT 編譯：

• 在 Angular CLI 中使用 --aot 選項(xiàng)構(gòu)建您的應(yīng)用程序：ng build --aot
• 在 Angular 應(yīng)用程序中配置 JIT 編譯器，以便像 AOT 所做的那樣提前編譯組件：

@NgModule({
  // ...
  providers: [
    {
      provide: COMPILER_OPTIONS,
      useValue: {
        providers: [{useClass: JitCompiler}]
      },
      multi: true
    }
  ],
  // ...
})
export class AppModule {}

以上是一些 Angular 性能優(yōu)化的實(shí)戰(zhàn)，其中一些技術(shù)可以單獨(dú)應(yīng)用，也可以同時(shí)使用，它可以幫助你最大程度地提高 Angular 應(yīng)用程序的性能并改善用戶體驗(yàn)。文章來源地址http://www.zghlxwxcb.cn/news/detail-649319.html

到了這里，關(guān)于Angular 性能優(yōu)化實(shí)戰(zhàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！