angular 在生产构建过程中,将[ngClass]="{x: ...}"转换为[class.x]="...",

jum4pzuy  于 6个月前  发布在  Angular
关注(0)|答案(3)|浏览(104)

与特性请求相关的@angular/*包有哪些?

common, compiler

描述

我注意到[ngClass]="..."语法比[class.x]="..."语法更重且运行速度慢。
...如果我以正确的方式进行测试=)
我在此处进行了一些测试:https://github.com/IvanBisultanov/angular_bundle_size
case1 - ngClass:1_className
case2 - class.:1_className
case3 - ngClass:5_classNames
case4 - class.:5_classNames
case5 - ngClass:10_classNames_x_2000
case6 - class.:10_classNames_x_2000
以下是结果:
| 生产包大小 | 第1/3/5个大小 | 第2/4/6个大小 | 差值 |
| ------------ | ------------ | ------------ | ------------ |
| case1 vs case2 | 158110 | 158051 | -59 |
| case3 vs case4 | 158483 | 158117 | -366 |
| case5 vs case6 | 164574 | 164357 | -217 |
npm run start-prod scripting time performance tab
| 尝试次数 | 1 | 2 | 3 | 4 | 5 | 平均值 |
| ------------ | ------------ | ------------ | ------------ | ------------ | ------------ | ------------ |
| case5, ms | 242 | 237 | 231 | 236 | 234 | 236 |
| case6, ms | 185 | 186 | 185 | 176 | 180 | 183 |
| 差值 | | | | | | -53 |

建议的解决方案

在生产构建过程中,是否可以将[ngClass]转换为[class.],然后捆绑代码?
作为结果,我们将拥有一个较小的包,应用程序似乎会更快一些。

已考虑的替代方案

无。

knsnq2tg

knsnq2tg1#

这个功能请求现在已经成为我们的待办事项候选!在接下来的阶段,社区有60天的时间进行投票。如果请求获得超过20票的赞成,我们将把它移到我们的考虑列表中。
你可以在我们的文档中找到更多关于功能请求流程的详细信息。

0lvr5msh

0lvr5msh2#

请注意,我们已经开始了针对您的功能请求的社区投票过程。距离投票过程结束还有20天。
有关Angular功能请求流程的更多详细信息,请参阅我们的文档。

a14dhokn

a14dhokn3#

这似乎是一个很好的候选人,用于扩展诊断 - [ngClass] 与字面值可以转换为单独的类绑定。

相关问题