Angular - 如果导入不必要的 ngModules 已在其他地方导入，是否会增加文件大小？

Question

我正在使用一个相当大的 Angular 应用程序，目前在共享模块中拥有所有共享组件和模块，每当我需要它导出的任何内容时，我都会导入该模块。

但是，我有一些小型功能模块，只需要共享模块中的很少模块，那么我是否应该增加架构的复杂性和模块化程度，以便只导入我需要的模块，即使它们是在其他地方导入的？

Angular 文档声明，已在另一个模块中导入的导入模块会被缓存，这不是问题，但这意味着什么，即使如此，应用程序是否会变得更慢/更大？

示例： 模块 1 导入 A、B、C。 模块 2 导入 A、C、D。

如果我在两个模块中导入 A、B、C、D（例如通过共享模块），是否会造成性能损失？

Answer 1

也许吧。这取决于您的应用程序的结构。

如果您不使用

lazy-loading

，您可以按照文档进行操作，它不会重复任何代码。使用 angular-cli 的原始配置创建的默认

chunks

将为您的模块生成一个

scripts.bundle.js

（以及其他内容的其他块）。

现在，如果您正在使用

lazy-loading

（正如您所说，您在问题的评论中），它将为每个延迟加载的模块创建一个

chunk

，您应该谨慎行事。

Angular-cli 使用

webpack

创建这些块，并且在发表此评论时，它将在每个需要它们的块上复制导入的模块（和第 3 方库！）。

这是一个已知问题，并且已部分解决，但正在等待 webpack 实现解决该问题所需的功能。

建议：

为每个延迟加载的模块创建一个

SharedModule

，并仅导入/声明该模块所需的内容，并仅使用此

SharedModule

。 不要从延迟加载的模块中导入主应用程序的

SharedModule

。

这仍然会重复不同块所需的模块，但至少不会在不需要的地方添加不必要的模块。

并密切关注上面链接的问题，以便您知道何时能够避免此解决方法。

干杯！