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

【问题标题】：Angular - Does importing unnecessary ngModules increase file size if they have been imported elsewhere?Angular - 如果已在其他地方导入不必要的 ngModules 是否会增加文件大小？
【发布时间】：2018-03-29 22:54:03
【问题描述】：

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

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

Angular docs state 已经在另一个模块中导入的导入模块被缓存并且没有问题，但这意味着什么，应用程序会变得更慢/更大吗？

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

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

【问题讨论】：

您失去了将应用程序拆分为延迟加载部分的能力。理想情况下，您会为每个功能创建一个模块，然后将该功能模块导入您需要的地方。然后，当您以后想要改善初始加载时间时，您只需延迟加载初始加载中显示的应用程序部分中不需要的模块，其他一切都很容易就位。
我有一堆导入共享模块的延迟加载模块。但是，如果我只导入 A、B、C 而不是 D，这些会变得更快吗？即使 D 之前已经在另一个模块中加载过？
没有必要关心在多个地方多次导入模块，Angular 会按照您引用的文档中提到的那样处理。主要问题是当你加载大模块时，即使它只实际使用了一小部分。
好的，到此结束。注意惰性模块，只导入需要的东西，在非惰性模块中，“桶”模块就可以了。
我认为每个功能都应该有一个模块。它通常会以意想不到的方式改变应该延迟加载的内容，然后更改模块结构可能非常麻烦。然后，您始终可以从较小的功能模块中构建更粗粒度的功能模块，但始终尝试尽可能具体地导入。

标签： angular angular-material angular-cli es6-modules ng-modules

【解决方案1】：

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

如果您不使用 lazy-loading，您可以按照文档进行操作，它不会重复任何代码。默认 chunks 使用原始配置创建的 angular-cli 将为您的模块生成单个 scripts.bundle.js（以及其他内容的其他块）。

现在，如果您正在使用 lazy-loading（正如您所说的您在问题的 cmets 中），它将为每个延迟加载的模块创建一个 chunk，您应该继续谨慎。

angular-cli 使用webpack 来创建这些块，到此评论时，它将复制导入的模块（和第 3 方库！）在每个需要它们的块上。

这是一个known issue，它一直是partially addressed，但它正在等待webpack 到implement a feature，这需要解决它。

建议：

为每个延迟加载的模块创建一个SharedModule，并仅导入/声明该模块所需的内容，并仅使用此SharedModule。 不要从延迟加载的模块中导入主应用的SharedModule。

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

并密切关注上面链接的问题，这样您就知道什么时候可以避免这种解决方法。

干杯！

【讨论】：

谢谢，很好的回答。我会留意那些线程。就像现在一样，惰性模块中的复制让我对它们有点消极，因为它是非惰性模块中的一个很棒的系统。