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

Question

所述角部件材料使用指南建议创建一个共享模块，以包括多个部件。我的问题是关于共享模块的使用。

共享角度材质模块

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

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

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

Answer 1

NgModule常见问题解答包括以下注释。

如果我导入同一个模块两次怎么办？

那不是问题。当三个模块都导入模块“A”时，Angular 会在第一次遇到模块“A”时对其求值一次，并且不会再这样做。

无论 A 级别出现在导入的 NgModule 的层次结构中，情况都是如此。当模块'B'导入模块'A'，模块'C'导入'B'，模块'D'导入[C,B,A]，那么'D'触发对'C'的求值，从而触发求值'B'，它评估'A'。当 Angular 到达“D”中的“B”和“A”时，它们已经被缓存并准备就绪。

Angular 不喜欢带有循环引用的 NgModule，因此不要让模块“A”导入模块“B”，模块“B”又导入模块“A”。

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

Angular Material beta.3 的弃用通知指出：

材质模块

MaterialModule( 和MaterialRootModule) 已被标记为已弃用。我们发现，在当前世界范围内的 tree-shaking 状态下，使用NgModule类似聚合会MaterialModule导致工具无法消除未使用的组件的代码。

为了确保用户最终获得尽可能最小的代码大小，我们不推荐使用MaterialModule，并将在后续版本中删除。

要替换MaterialModule，用户可以在其应用程序中创建自己的“材料”模块（例如，GmailMaterialModule），该模块仅导入应用程序中实际使用的组件集。

截至 2019 年，同样的建议仍然适用。Angular Material 入门指南指出：

或者，您可以创建一个单独的组件NgModule来导入然后重新导出您将在应用程序中使用的所有 Angular Material 组件。通过再次导出它们，其他模块可以简单地包含您CustomMaterialModule需要的 Material 组件，并自动获取所有导出的 Material 模块。导入/导出应用程序范围的 Material 模块的一个好地方是SharedModule.