Angular - 导入不必要的ngModules是否会增加文件大小,如果它们已导入其他位置?
我正在使用一个相当大的Angular应用程序,并且当我需要导出任何内容时,我导入了共享模块内的所有共享组件和模块。Angular - 导入不必要的ngModules是否会增加文件大小,如果它们已导入其他位置?
但是我有一些小特性模块只需要很少的共享模块模块,我应该增加体系结构的复杂性和模块性,以便导入我需要的模块,即使它们被导入其他地方?
The Angular docs state导入已导入其他模块的模块会被缓存,而不是问题,但这是什么意思呢,即使如此,应用程序变得更慢/更大?
实施例: 模块1升的进口A,B,C. 模块2升的进口A,C,D。
是否有一个性能损失,如果我导入A,B,C,d在两个模块(例如通过共享模块)?
也许吧。这取决于你的应用程序的结构。
如果你是不使用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
。
这仍然会复制不同块所需的模块,但至少不会在不需要的地方添加不必要的模块。
并关注上面链接的问题,因此您知道何时可以避免此解决方法。
干杯!
谢谢,很好的答案。我会密切关注这些线索。就像现在一样,懒惰模块中的发布对我们来说有点负面,因为它是非懒惰模块中的一个很好的系统。 –
你没有能力将你的应用程序分成延迟加载的部分。理想情况下,您需要为每个功能创建一个模块,然后将该功能模块导入到需要的位置。然后,当您稍后想要提高初始加载时间时,只需在初始加载中显示的应用程序部分中不需要的模块,就可以轻松加载模块,并且其他所有内容都可轻松实现。 –
我有一堆lasy加载模块,它导入共享模块。但是,如果我只导入A,B,C而不是D,它们会变得更快吗?即使D先前已经加载到另一个模块中? –
无需关心在多个位置多次导入的模块,Angular会按照您引用的文档中提到的那样处理这些问题。主要的问题是当你加载大模块时,即使只有小部分被实际使用。 –