数码实验室@2020排行榜！Realworld前端框架的比较全文共1500字

全文共1500字，预计学习时长6分钟

文章图片
图源：unsplash
过去的三年我们都探讨了这个话题，那么今年的情况会是怎样呢？
首先声明，此文并不是关于未来前端选择的比较，而是从三个方面（性能，大小，相似应用下的代码行数）来进行小范围的简单比较。
读者需要注意:
·本文是在比较Realworld软件——而不是正在研发中的软件，这些软件通常缺乏足够的知识和想法，因此难以实现。
·由专家撰写或评审过——理想情况下，该技术领域的专家会评估此项目。
·以某种方式标准化——一个符合特定规则的项目存在一种规范，提供后端API ，静态标记和样式。
正在比较哪些库/框架？
【数码实验室@2020排行榜！Realworld前端框架的比较】撰写此文时， Realworld存储库中有24种conduit实现As ，它们之间的从属地位并不重要，唯一的判定标准是看它是否出现在RealWorldrepopage上。

文章图片
关注的是什么指标？
性能—此应用程序需要多长时间才能显示内容并可用？
大小—该应用程序有多大？我们将只比较已编译的JavaScript文件的大小。 HTML和CSS对所有变体都是通用的，并且是从CDN（内容交付网络）下载的。所有技术都可以编译或转换为JavaScript ，因此仅调整该文件的大小。
代码行数—需要多少行代码才能基于规范创建RealWorld应用程序？某些应用程序很麻烦，但应该不会产生重大影响。我们量化的唯一文件夹是每个应用程序中的 src/ 。无论它是否是自动生成的，你仍然需要对其进行维护。

文章图片
图源：unsplash

文章图片
标准#1:性能
我们通过Chrome随附的LighthouseAudit查看性能得分，得分在0到100之间。有关更多详细信息，请参阅《Lighthouse计分指南》。
审查设置

文章图片
所有经过测试的应用程序的Lighthouse审核设置
基本原理
越早开发的应用程序，人们越早开始使用，用户体验相对也更好。

文章图片
性能得分(0–100)—越高越好
评论
注意:由于缺少演示应用程序，因此跳过了PureScript 。
总结
通过LighthouseAud ，可以看到在今年未维护/未更新的应用程序跌破90关口。当然如果得分>90 ，可能也不会有很大的不同。 AppRun ， Elm和Svelte的表现令人印象深刻。

文章图片
图源：unsplash

文章图片
标准#2:大小
传输大小取决于Chrome网络标签，服务器提供的GZIPped响应标头以及正文。
这取决于框架的大小以及所添加的任何其他依赖项。同样，构建工具可以很好地清除捆绑软件中未使用的代码。文件越小，下载速度越快，解析的次数也更少。

文章图片
文件大小：KB—文件越小，传输越快
评论
由于缺少演示软件，因此跳过了PureScript 。 Angular+ngrx+nx ，请不要怪我用Angular+ngrx+nx-检查Chrome开发工具网络标签，如果有计算错误的地方，评论区见。
Rust+Yew+WebAssembly包括also.wasmfile(s)
总结
Svelte和Stencil社区将其压缩到20KB以下的出色操作，确实是一项成就。