直接在 Angular 独立组件的导入数组中使用 CommonModule 的性能影响

Question

在最近的 Angular 版本（>=17）中，如果我们想使用 Pipe 或像

NgClass

这样的指令，我们可以遵循两种方法：

1. 导入

   CommonModule

   。例如：

import { CommonModule } from '@angular/common';
@Component({
  selector: 'app-messages',
  imports: [CommonModule],
  templateUrl: './messages.component.html',
  styleUrl: './messages.component.scss'
})
[...]

2. 导入特定指令/管道。例如：

import { NgClass, DatePipe } from '@angular/common';
@Component({
  selector: 'app-messages',
  imports: [NgClass, DatePipe],
  templateUrl: './messages.component.html',
  styleUrl: './messages.component.scss'
})
[...]

我知道导入

CommonModule

更方便，因为只需一次导入，我们就可以获得一堆指令，但如果我只想使用该模块中的一两个指令，那么从性能角度来看，什么是最佳选择？或者这是否无关紧要，因为最后这个模块是从其他地方或模块导入的？

官方文档：

https://angular.dev/api/common/CommonModule

https://v17.angular.io/api/common/CommonModule

谢谢！

Answer 1

没有性能差异，它只是帮助您更好地查看依赖项并可能删除未使用的依赖项。

同样在 v19 中，Angular 会告诉你是否有未使用的独立导入，但它不会告诉你模块导入是无用的。

Answer 2

我们称之为 Angular 的 tree-shaking 过程

CommonModule 提供了常用指令（NgIf，NgForOf，NgClass，...）和管道（DatePipe，CurrencyPipe，...）的集合，导入 CommonModule 意味着您可以在模块中获得所有这些功能，并且此导入通常是在模块级别完成。

但最终，Angular 在构建生产过程中的 tree-shaking 过程通常会消除未使用的代码，因此未使用的管道或指令将不会包含在最终包中。

关于运行时，我们有很多重载的功能和数据，导入所有 CommonModule 与它们相比根本没有什么:)