angular - 可能包含许多组件模块的共享 Angular Material 模块的性能？

Question

Angular Material component usage guide建议创建一个共享模块以包含多个组件。我的问题是关于共享模块的使用。
共享 Angular Material 模块

import {MatButtonModule} from '@angular/material/button';
import {MatCheckboxModule} from '@angular/material/checkbox';

@NgModule({
  imports: [MatButtonModule, MatCheckboxModule],
  exports: [MatButtonModule, MatCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

这个共享模块可以包含许多组件模块。也许50个或更多。假设我已将此共享模块导入另一个模块，它只需要一个 Material 模块。在这种情况下，是否存在性能损失，例如加载时间？共享模块是否被缓存？

Answer 1

NgModule FAQs包括以下注释。

What if I import the same module twice?

That's not a problem. When three modules all import Module 'A', Angular evaluates Module 'A' once, the first time it encounters it, and doesn't do so again.

That's true at whatever level A appears in a hierarchy of imported NgModules. When Module 'B' imports Module 'A', Module 'C' imports 'B', and Module 'D' imports [C, B, A], then 'D' triggers the evaluation of 'C', which triggers the evaluation of 'B', which evaluates 'A'. When Angular gets to the 'B' and 'A' in 'D', they're already cached and ready to go.

Angular doesn't like NgModules with circular references, so don't let Module 'A' import Module 'B', which imports Module 'A'.

仅包含特定应用程序所需的 Angular Material 组件模块可以带来额外的性能优势。

deprecation notice for Angular Material beta.3状态:

MaterialModule

MaterialModule (and MaterialRootModule) have been marked as deprecated. We've found that, with the current state of tree-shaking in the world, that using an aggregate NgModule like MaterialModule leads to tools not being able to eliminate code for components that aren't used.

In order to ensure that users end up with the smallest code size possible, we're deprecating MaterialModule, to be removed in the a subsequent release.

To replace MaterialModule, users can create their own "Material" module within their application (e.g., GmailMaterialModule) that imports only the set of components actually used in the application.

自 2019 年起，同样的建议仍然适用。 Angular Material getting started guide states :

Alternatively, you can create a separate NgModule that imports and then re-exports all of the Angular Material components that you will use in your application. By exporting them again, other modules can simply include your CustomMaterialModule wherever Material components are needed, and automatically get all of the exported Material modules. A good place for importing/exporting the application-wide Material modules is the SharedModule.