CommonModule vs independent directives import performance in Angular

In recent Angular versions (>=17), if we want to use a Pipe or directives like NgClass we can follow two approaches:

1. Importing the CommonModule. Eg:

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

1. Importing the specific directive/pipe. Eg:

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


I know that importing CommonModule is more handy because with just one import we get a bunch of directives but if I want to use just one or two directives from that module, what is best option in performance terms? Or is it something that doesn't matter because at the end this module becomes imported from other places or modules?

Thanks!

Continue reading...