Angular组件的代码开销是多少

Question

在我正在构建的Angular 5代码中，我可以选择一种设计方法：

1. 许多不同的小组件各自处理特定的数据
2. 接受输入并通过打开输入显示正确数据的单个组件

方法2的优势在于，树摇动将仅包含我们想要的组件，而对于方法1，如果已加载组件，则必须加载所有代码。但是我担心由于组件数量的原因，我正在生成多少额外的代码（用户必须加载）。

所以我的问题是：

由于加载了最少的Angular 5组件，我的应用加载了多少代码/数据？

Answer 1

对于Angular，这两种方法在技术上都是相同的。

当Angular编译时，它会生成一个名为main.js的单个 JS，所有小组件的所有代码都将在同一个JS中，因此额外的开销。

Angular可以lazy-load的小型组件，但是，仅当您的用户除非打开/关闭标志就永远看不到任何东西时，才建议对整个功能进行推荐。

实施lazy-load后，Angular会为该额外代码（ Ex。 main-2.js，main-3.js，< em>多余文件的名称是由您的延迟加载设置定义的。），您可以进一步了解here这个主题。

两种方法的区别

严重的是，这两种方法都没有性能差异，Angular可以轻松处理这两种方法。您可以通过阅读main.js中生成的代码来验证我说的是实话，您会看到组件只是封装的变量（为便于阅读，请尝试--build-optimizer=false和--source-map=false ）。因此，我建议您采用第一种方法。另外，我强烈建议您Upgrade Angular to version 9 or Latest -并不像您想象的那么难- Ivy和AOT处理JS更好。

Answer 2

除了@Pushprajsinh的回答外，在处理组件中的数据时，我们还应格外小心，我们应保持所有获取数据的逻辑，在组件外的数据之间进行映射。

1. 我们应该使用路由解析来获取和映射数据，它应该位于单独的服务中。
2. 我们应该将所有非重用逻辑（不是特定于组件的）移到服务上。

以上两点将解决大多数情况。