Angular组件的代码开销是多少

时间:2018-10-09 13:54:25

标签: angular angular5

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

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

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

所以我的问题是:

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

2 个答案:

答案 0 :(得分:1)

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

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

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

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

两种方法的区别

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

答案 1 :(得分:0)

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

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

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