优化角度应用的性能-DEV365 开发者社区

“在了解性能优化之前，首先我们将学习一些方法，可以通过这些方式分析任何Web应用程序的性能”

1。使用Chrome DevTools：

这是Google Chrome浏览器中内置的一组Web开发人员工具。您可以使用“性能”选项卡记录和分析Angular应用程序的运行时性能，例如CPU使用，内存消耗，渲染时间等。

在Chrome浏览器中打开您的Angular应用程序
按Ctrl+Shift+I（Windows）或CMD+Option+I（Mac）打开DevTools
单击“性能”选项卡
单击记录按钮或按CTRL+E（Windows）或CMD+E（Mac）开始录制
在您的角度应用程序上执行一些操作
单击停止按钮或按CTRL+E（Windows）或CMD+E（Mac）停止录制
分析DevTools面板中的性能结果

2。使用WebPagetest：

这是一种基于网络的工具，可使用真实浏览器和实际消费者连接速度从全球多个位置执行网站速度测试。

去https://www.webpagetest.org/
在测试位置字段中输入Angular应用程序的URL
从下拉菜单中选择一个测试位置和浏览器
单击开始测试按钮
等待测试完成并在网页上查看性能结果

3。使用角CLI（特定于Angular应用）：

打开终端并导航到您的Angular Project文件夹
ng build -stats-json //这会构建您的Angular应用程序并在DIST文件夹中生成stats.json文件
ng服务-Stats-json //这为您的Angular应用程序提供服务，并在DIST文件夹中生成stats.json文件

“现在让我们看看如何优化Angular应用程序”

优化角度应用的10种方法

1。启用生产模式：此模式在开发构建中执行许多重要的优化，例如提前汇编，缩小和震动。

// Enabling production mode
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode(); // This enables production mode
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

2。使用AOT汇编：这可以通过从部署捆绑包中删除Angular编译器并仅生产编译模板来降低应用程序有效载荷。您可以将-AOT标志与NG构建或NG服务命令一起使用。

ng build --prod --aot=true

3。使用Build Optimizer：这将删除角度特定的装饰器，构造函数参数，并使代码缩影更容易删除未使用的代码。您可以使用ng build命令使用-buildoptimizer标志。

ng build --prod --buildOptimizer=true

4。避免在视图中进行函数调用和获取器：这些可以触发不必要的更改检测周期并影响性能。而是使用属性或纯管道在视图中显示数据。

5。使用纯管道：这些只有在输入变化时才能重新评估，这与在每个变化检测周期中重新评估的不纯管道不同。您可以通过将纯属性设置为@pipe Decorator中的true来创建纯管道。

@Pipe({
  name: 'square',
  pure: true // This tells Angular to only recompute the pipe output when the input changes
})
export class SquarePipe implements PipeTransform {
  transform(value: number): number {
    return value * value;
  }
}

6.使用懒惰加载模块：这使您可以按需加载模块，而不是一次加载它们。这减少了初始加载时间并改善了性能。您可以使用Angular CLI使用-Route标志生成懒负载模块。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) // This loads the customers module on demand
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) // This loads the orders module on demand
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

7。使用代码拆分：这是一种将您的代码拆分为可以异步加载的较小块的技术。这样可以减少主捆绑包的大小并提高性能。您可以使用WebPack或lollup之类的工具来实现代码拆分。

8。使用OnPush更改检测策略：这告诉Angular仅在触发输入属性或事件时检查更改。这减少了变化检测周期的数量并提高了性能。您可以将更改的属性设置为@component Decorator中的更改tectectionstrategy.onpush。

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush // This tells Angular to only check for changes when the input properties change or an event is triggered
})
export class MyComponentComponent implements OnInit {
  @Input() data: any; // This is an input property that can change from outside
  constructor() { }
  ngOnInit(): void {
  }
}

9。使用异步管：这是一个内置管道，可订阅可观察或承诺并返回最新值。它还可以自动处理取消订阅，从而防止内存泄漏。您可以使用语法使用模板中的异步管

{{ observableOrPromise | async }}.

10。在NGFOR上使用TrackBy函数：这是一个函数，该函数返回数组中每个项目的唯一标识符。它有助于角度跟踪变化并重用现有元素，而不是创建新元素。这可以提高性能并减少内存使用量。您可以使用Syntax *ngfor =“让项目; trackby：trackById”。

@Component({
  selector: 'app-my-list',
  template: `
    <ul>
      <li *ngFor="let item of items; trackBy: trackById">{{item.name}}</li>
    </ul>
  `
})
export class MyListComponent {
  items = [
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
    {id: 3, name: 'Charlie'}
  ];
  // This function returns the unique identifier of each item
  trackById(index: number, item: any) {
    return item.id;
  }
}

上面提到的

是我们可以优化角度应用的一些方式。除此之外，您还可以使用分页，缓存，将数据存储在本地存储中，并避免使用不必要的API调用等技术...

谢谢您的时间，很快见:)