Angular - 导入不必要的ngModule是否会增加文件大小,如果它们已导入其他位置?

时间:2017-10-18 06:12:50

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

我正在使用一个相当大的Angular应用程序,目前在共享模块中有所有共享组件和模块,只要我需要它导出的东西,我就会导入它。

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

已导入已在另一个模块中导入的模块的Angular docs state被缓存而不是问题,但这意味着什么,即使这样,应用程序会变得更慢/更大?

实施例: 模块1导入A,B,C。 模块2导入A,C,D。

如果我在两个模块中导入A,B,C,D(例如通过共享模块),是否会导致性能下降?

1 个答案:

答案 0 :(得分:5)

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

如果您未使用 lazy-loading,则可以按照文档操作,并且不会复制任何代码。使用angular-cli构建的原始配置创建的默认chunks将为您的模块生成单个scripts.bundle.js(其他块中的其他块)。

现在,如果您正在使用 lazy-loading(正如您所说的那样在您的问题的评论中),它将为每个延迟加载的模块创建chunk你应该谨慎行事。

angular-cli使用webpack创建这些块,到此评论时,将重复导入的模块(和第三方库!)在每个需要的块上它们。

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

<强>建议:

为每个延迟加载的模块创建一个SharedModule,并仅导入/声明该模块所需的内容,并仅使用此SharedModule请勿在延迟加载的模块中导入主应用的SharedModule

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

并密切关注上述相关问题,以便了解何时可以避免此解决方法。

干杯!