哪种方式最适合延迟加载角材料模块？答案

【问题标题】：Which way is the best for lazy load angular material modules?哪种方式最适合延迟加载角材料模块？
【发布时间】：2023-03-25 04:05:02
【问题描述】：

1-在像 angular-material.module.ts 这样的模块中导入角度材料模块的所有模块然后在共享模块中导入该模块是否正确？

2- 如果使用上述方式，例如使用 mat-input 的组件时，仅加载 mat-input 模块或加载在 angular-material.module.ts 中导入的所有模块？

【问题讨论】：

【解决方案1】：

Webpack 中仍然存在一个未解决的错误，即 tree shaking 仍将未使用的类保留在捆绑文件中。 Angular/Cli 使用了这个特性，所以我可以看到它仍然没有修复。

只需关注此链接即可查看更多信息： https://github.com/webpack/webpack/issues/2899

【讨论】：

【解决方案2】：

据我所知，将 Angular 材质模块加载到单个 ts 文件中，不会对性能产生影响，摇树有助于不加载未使用的模块，因此您只是提供路径，使用单个模块总是有帮助在代码折射中。

【讨论】：

【解决方案3】：

如果你想创建共享组件（并将它们导入到不同的模块中），你应该创建一个 angular-material.module.ts 并导入到所有需要它们的延迟加载组件中。

否则你可以只导入你需要的特定材质模块到惰性模块中

【讨论】：

【解决方案4】：

尊重 Angular 编码风格，第一个解决方案更好。创建 material.module.ts 并将其导入 shared.module.ts

此解决方案与第二种（仅导入使用的模块）之间的差异可能在性能上太小，并且更难以维护。

无论如何，在您的 material.module.ts 中，您只能导入应用程序中使用的库，而不是整个材料包。如果您使用延迟加载模块，您的延迟模块中使用的所有模块都将加载整个包含，因此 ... 将加载整个材料导入。

【讨论】：