Angular 怎么进行性能优化

Angular 是一个强大的前端框架，但随着应用规模的扩大，性能问题可能会逐渐显现。为了确保 Angular 应用的高效运行，开发者需要采取一系列性能优化措施。本文将详细介绍 Angular 性能优化的各个方面，包括代码优化、懒加载、变更检测、服务端渲染等。

1. 代码优化

1.1 使用 AOT 编译

Angular 提供了两种编译方式：JIT（Just-In-Time）编译和 AOT（Ahead-Of-Time）编译。JIT 编译在浏览器中运行时进行，而 AOT 编译在构建时进行。AOT 编译可以显著减少应用的启动时间，因为它减少了浏览器需要下载和解析的代码量。

ng build --prod

1.2 使用 Tree Shaking

Tree Shaking 是一种通过移除未使用的代码来减少应用体积的技术。Angular CLI 默认启用了 Tree Shaking，但开发者需要确保代码中没有未使用的模块或组件。

1.3 使用 Lazy Loading

懒加载是一种将应用拆分为多个模块，并在需要时加载这些模块的技术。这可以减少初始加载时间，并提高应用的响应速度。

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

1.4 使用 OnPush 变更检测策略

Angular 的默认变更检测策略是 Default，它会在每次事件触发时检查所有组件。使用 OnPush 策略可以减少不必要的变更检测，从而提高性能。

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {}

1.5 避免不必要的 DOM 操作

频繁的 DOM 操作会导致性能问题。开发者应尽量避免直接操作 DOM，而是使用 Angular 的数据绑定和模板语法。

2. 懒加载

2.1 路由懒加载

路由懒加载是一种将应用拆分为多个模块，并在用户导航到特定路由时加载这些模块的技术。这可以减少初始加载时间，并提高应用的响应速度。

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

2.2 组件懒加载

组件懒加载是一种将组件拆分为独立的模块，并在需要时加载这些模块的技术。这可以减少初始加载时间，并提高应用的响应速度。

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {}

3. 变更检测

3.1 使用 OnPush 变更检测策略

Angular 的默认变更检测策略是 Default，它会在每次事件触发时检查所有组件。使用 OnPush 策略可以减少不必要的变更检测，从而提高性能。

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {}

3.2 使用 ChangeDetectorRef

ChangeDetectorRef 是 Angular 提供的一个服务，用于手动控制变更检测。开发者可以使用 detach 和 reattach 方法来控制变更检测的执行。

constructor(private cdr: ChangeDetectorRef) {}

ngOnInit() {
  this.cdr.detach();
}

someMethod() {
  this.cdr.reattach();
}

3.3 使用 NgZone

NgZone 是 Angular 提供的一个服务，用于控制异步操作的执行。开发者可以使用 runOutsideAngular 方法来避免不必要的变更检测。

constructor(private ngZone: NgZone) {}

someMethod() {
  this.ngZone.runOutsideAngular(() => {
    // 异步操作
  });
}

4. 服务端渲染

4.1 使用 Angular Universal

Angular Universal 是一种将 Angular 应用渲染为 HTML 的技术，可以在服务器端生成 HTML，并将其发送到客户端。这可以提高应用的初始加载速度，并改善 SEO。

ng add @nguniversal/express-engine

4.2 使用 TransferState

TransferState 是 Angular 提供的一个服务，用于在服务器端和客户端之间传递状态。这可以减少客户端需要执行的重复工作，从而提高性能。

import { TransferState, makeStateKey } from '@angular/platform-browser';

const SOME_KEY = makeStateKey<any>('someKey');

constructor(private transferState: TransferState) {}

ngOnInit() {
  const data = this.transferState.get(SOME_KEY, null);
  if (data) {
    // 使用数据
  } else {
    // 获取数据
    this.transferState.set(SOME_KEY, data);
  }
}

5. 其他优化技巧

5.1 使用 Web Workers

Web Workers 是一种在后台线程中执行 JavaScript 代码的技术。开发者可以使用 Web Workers 来执行耗时的计算任务，从而避免阻塞主线程。

const worker = new Worker('./app.worker', { type: 'module' });

worker.postMessage({ data: 'some data' });

worker.onmessage = ({ data }) => {
  console.log(data);
};

5.2 使用 Service Workers

Service Workers 是一种在后台运行的脚本，可以拦截网络请求并缓存响应。开发者可以使用 Service Workers 来实现离线访问和快速加载。

ng add @angular/pwa

5.3 使用 CDN

使用 CDN（内容分发网络）可以加速静态资源的加载速度。开发者可以将 Angular 应用的静态资源托管在 CDN 上，从而减少加载时间。

5.4 使用 Gzip 压缩

Gzip 是一种压缩算法，可以显著减少文件的大小。开发者可以在服务器端启用 Gzip 压缩，从而减少传输时间。

# Nginx 配置
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

5.5 使用 HTTP/2

HTTP/2 是一种新的网络协议，可以显著提高网络传输效率。开发者可以在服务器端启用 HTTP/2，从而减少加载时间。

# Nginx 配置
listen 443 ssl http2;

6. 性能监控

6.1 使用 Angular DevTools

Angular DevTools 是一个浏览器扩展，可以帮助开发者监控 Angular 应用的性能。开发者可以使用 Angular DevTools 来查看变更检测的执行情况、组件的渲染时间等。

6.2 使用 Lighthouse

Lighthouse 是一个开源工具，可以帮助开发者监控 Web 应用的性能。开发者可以使用 Lighthouse 来查看应用的加载时间、渲染时间、交互时间等。

lighthouse https://example.com

6.3 使用 Web Vitals

Web Vitals 是 Google 提供的一组指标，用于衡量 Web 应用的性能。开发者可以使用 Web Vitals 来监控应用的加载时间、交互时间、视觉稳定性等。

import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

7. 总结

Angular 性能优化是一个复杂的过程，涉及到代码优化、懒加载、变更检测、服务端渲染等多个方面。开发者需要根据应用的具体情况，选择合适的优化策略。通过合理的优化，可以显著提高 Angular 应用的性能，从而提供更好的用户体验。

---

以上是关于 Angular 性能优化的详细介绍。希望这些内容能帮助你更好地理解和应用 Angular 的性能优化技术。如果你有任何问题或建议，欢迎在评论区留言。