在我正在构建的Angular 5代码中,我可以选择一种设计方法:
方法2的优势在于,树摇动将仅包含我们想要的组件,而对于方法1,如果已加载组件,则必须加载所有代码。但是我担心由于组件数量的原因,我正在生成多少额外的代码(用户必须加载)。
所以我的问题是:
由于加载了最少的Angular 5组件,我的应用加载了多少代码/数据?
答案 0 :(得分:1)
当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更好。
答案 1 :(得分:0)
除了@Pushprajsinh的回答外,在处理组件中的数据时,我们还应格外小心,我们应保持所有获取数据的逻辑,在组件外的数据之间进行映射。
以上两点将解决大多数情况。