15

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

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

Angular文档指出已经在另一个模块中导入的导入模块被缓存并且不是问题,但这意味着什么,应用程序会变得更慢/更大吗?

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

如果我在两个模块中导入 A、B、C、D(例如通过共享模块),会不会有性能损失?

4

1 回答 1

12

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

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

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

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

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

建议:

为每个延迟加载的模块创建一个SharedModule并仅导入/声明该模块所需的东西并仅使用 this SharedModule不要SharedModule从延迟加载的模块中导入您的主应用程序。

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

并密切关注上面链接的问题,这样您就知道何时能够避免这种解决方法。

干杯!

于 2017-10-18T07:14:26.763 回答