CommonModule 与 Angular 中的独立指令导入性能

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

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

谢谢！

Answer 1

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

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