懒惰地导入 UI 模块/组件的最佳方法是啥
Posted
技术标签:
【中文标题】懒惰地导入 UI 模块/组件的最佳方法是啥【英文标题】：What is the best way to import UI Modules/Components lazily懒惰地导入 UI 模块/组件的最佳方法是什么 【发布时间】：2019-10-10 01:24:11 【问题描述】：我目前正在遵循 Angular ngModule docs 中推荐的模块结构。
我的理解是，共享模块通常应该包含任何指令、守卫、模型和其他将在整个应用程序中使用的辅助功能。然后大多数其他模块将导入此共享模块以实现此通用功能。
我见过的大多数示例也会将所有 UI 模块导入共享模块。因此，例如，如果我使用 Angular Material，我将在此处导入所有共享的 UI 模块，即。 MatInputModule, MatSelectModule, ...
我的问题是我是否想延迟加载模块以减小初始包大小，并假设某些 UI 模块仅用于一个功能模块。那么将这个 UI 模块导入功能模块而不是共享模块是否有意义。
例如。如果我的 Auth 模块是唯一使用 MatCardModule 的模块，那么我是否应该只将其导入 Auth 模块，而不是将所有其他导入的 MatModules 导入共享模块中？
假设答案是肯定的 - 如果在两个不同的功能模块中使用 MatCardModule 是否仍然有意义（然后您将其导入到两个单独的模块中）？ Angular 是否巧妙地处理了这一点 - 例如，如果模块已经下载到一个延迟加载的模块中，它不会再次下载第二个延迟加载的模块？
TLDR 最好只将您需要的 UIModule 导入到您的功能模块中（即使这意味着您将多次导入同一个 UIModule），还是保留所有您的 UIModule 更好？ UIModules 在共享模块中导入，然后在所有其他功能模块中导入共享模块
【问题讨论】：
【参考方案1】：根据我的经验，这是 IMO
我有一个共享模块，正如你提到的，我在那里添加了我所有的共享组件和指令。
我创建了一个名为 MyCommonModule 的模块并导入和导出 Material 模块以及大多数模块中使用的其他 3rd 方模块 然后我在 AppModule 中导入 MyCommonModule
还有一些特定的模块会用到一些功能模块中，比如ChartModule，你可以专门导入那个。
关于包大小，如果你不使用模块，即使你导入了 Angular，也不会通过 TreeShaking 阶段包含它，所以即使你导入了所有 js 文件的大小，也将与你已经在应用程序范围内使用的模块一样多
关于你的第二个等式，如果一个模块 js 文件已经下载，angular 将不会再次下载它
【讨论】：
以上是关于懒惰地导入 UI 模块/组件的最佳方法是啥的主要内容，如果未能解决你的问题，请参考以下文章