0

我正在使用一个相当大的Angular应用程序,并且当我需要导出任何内容时,我导入了共享模块内的所有共享组件和模块。Angular - 导入不必要的ngModules是否会增加文件大小,如果它们已导入其他位置?

但是我有一些小特性模块只需要很少的共享模块模块,我应该增加体系结构的复杂性和模块性,以便导入我需要的模块,即使它们被导入其他地方?

The Angular docs state导入已导入其他模块的模块会被缓存,而不是问题,但这是什么意思呢,即使如此,应用程序变得更慢/更大?

实施例: 模块1升的进口A,B,C. 模块2升的进口A,C,D。

是否有一个性能损失,如果我导入A,B,C,d在两个模块(例如通过共享模块)?

+0

你没有能力将你的应用程序分成延迟加载的部分。理想情况下,您需要为每个功能创建一个模块,然后将该功能模块导入到需要的位置。然后,当您稍后想要提高初始加载时间时,只需在初始加载中显示的应用程序部分中不需要的模块,就可以轻松加载模块,并且其他所有内容都可轻松实现。 –

+0

我有一堆lasy加载模块,它导入共享模块。但是,如果我只导入A,B,C而不是D,它们会变得更快吗?即使D先前已经加载到另一个模块中? –

+0

无需关心在多个位置多次导入的模块,Angular会按照您引用的文档中提到的那样处理这些问题。主要的问题是当你加载大模块时,即使只有小部分被实际使用。 –

回答

2

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

如果你是不使用lazy-loading,你可以按照文档,它不会重复任何代码。使用由angular-cli构建的原始配置创建的默认chunks将为您的模块生成一个单独的scripts.bundle.js(以及用于其他内容的其他块)。

现在,如果你使用lazy-loading(因为你说你是你的问题的评论),它会为每个延迟加载模块chunk,您应该谨慎行事。

角度,CLI使用webpack来创建这些块,并通过此评论的时候,它会复制在需要他们的每块的导入模块(和第三方库!)。

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

建议:

创建您的每一个懒惰laoaded模块和导入SharedModule /宣称只需要该模块的东西,只能使用此SharedModule请勿从惰性加载模块中导入主应用程序的SharedModule

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

并关注上面链接的问题,因此您知道何时可以避免此解决方法。

干杯!

+0

谢谢,很好的答案。我会密切关注这些线索。就像现在一样,懒惰模块中的发布对我们来说有点负面,因为它是非懒惰模块中的一个很好的系统。 –

相关问题