Angular共享模块和webpack

Question

我们正试图弄清楚在Angular中使用Webpack共享模块的正确方法是什么。

我们有在我们的应用程序的不同位置重复使用的组件。它们并未在应用程序的所有视图中使用，但大部分都使用。

我们创建了一个导入和导出组件的sharedModule。然后将此sharedModule导入应用程序的所需区域。

这是我们开始怀疑的地方。如果模块A导入sharedModule但只需要5个共享组件中的2个，那么不需要3个导入组件会发生什么？

我们知道Webpack应该进行树抖动和死码删除，但是我们是否希望依赖Webpack来实现这一点，或者我们不使用sharedModule并仅在我们需要的地方导入组件？

Answer 1

如果你在app.module中加载共享模块，它将加载所有组件和指令，即使页面不需要它们。

我建议您拆分共享模块，并且只保留应用程序中所需的组件和指令。

例如，如果只有3个页面需要3个组件，则创建一个只包含3个组件的模块并从该模块中导出它们。

如果您的共享模块现在非常大，它会显着提高您的性能。

尽可能多地拆分小模块。