再来一次。现在是2020年，还有2019年、2018年和2017年。让我先开始——绝对不是你应该为前端选择的比较。与应用程序非常相似的性能、大小和代码行数三个方面相比，它体积小且相对简单。考虑到这一点，它是这样工作的：我们正在比较真实世界的应用程序——而不仅仅是“待办”应用程序。“待办事项”通常没有传达足够的知识和观点来实际构建一个真正的应用程序。它在某种程度上是标准化的——一个符合特定规则的项目——有一个规范。提供后端API、静态标记和样式。由专家撰写或审阅-理想情况下应由技术专家构建或审阅的一致的真实项目。我们比较的是哪些库/框架？在撰写本文时，RealWorld存储库中有24个Conduit实现。您是否拥有大量追随者并不重要。唯一的条件是-它显示在RealWorld回购页面上。我们看什么指标？性能——应用程序显示内容并变得可用需要多长时间？大小——应用程序有多大？我们只会比较编译后的JavaScript文件的大小。HTML和CSS对所有变体都是通用的，并从CDN（内容分发网络）下载。所有技术都可以编译或转译为JavaScript，因此我们只调整该文件的大小。代码行数——作者需要多少行代码才能根据规范创建一个RealWorld应用程序？公平地说，有些应用程序很麻烦，但应该不会产生重大影响。我们量化的唯一文件夹是每个应用程序中的src/。它是否自动生成并不重要——您仍然需要维护它。指标1：性能我们将检查Chrome附带的LighthouseAudit的性能分数。Lighthouse返回0到100之间的性能分数。0是最低分数。详见《灯塔计分指南》。所有测试应用程序的审计设置LighthouseAuditSettings性能（0-100分）——越高越好。备注注意：由于缺少演示应用程序，因此跳过了PureScript。结论LighthouseAudit没有睡觉。今年，您可以看到未维护/未更新的应用程序从90个悬崖上掉下来。如果您的应用得分>90，它可能不会产生很大的不同。也就是说，AppRun、Elm和Svelte确实令人印象深刻。指标2：大小传输大小来自Chrome网络选项卡。服务器提供的GZIP压缩响应标头以及响应文本。这取决于框架的大小和添加的任何其他依赖项。此外，构建构建工具可以很好地从捆绑包中消除未使用的代码。基本原理较小的文件下载速度更快，需要的解析也更少。以KB为单位的传输大小——越少越好备注PureScript由于缺少演示应用程序而被跳过。Angular+ngrx+nx，请不要怪我Angular+ngrx+nx-检查Chrome开发工具网络选项卡，如果我算错了请告诉我。Rust+Yew+WebAssembly还包括.wasm文件结论Svelte和Stencil社区所做的惊人工作将其压缩到20KB以下确实是一项成就。指标3：代码行数使用cloc，我们可以统计每个存储库的src文件夹中的代码行数。空白行和注释行不是此计算的一部分。为什么这是有道理的？如果调试是消除软件错误的过程，那么编程一定是将它们放入的过程——EdsgerDijkstra基本原理这说明给定的库/框架/语言是多么简洁。根据规范，您需要多少行代码才能实现几乎相同的应用程序（其中一些具有更多功能）。代码行——越少越好备注Svelte被跳过，因为cloc无法处理.svelte文件。由于cloc无法处理.riot文件，因此跳过了Riotjs-effector-universal-hot。Angular+ngrx：使用/libs文件夹完成的LoC计算仅包括.ts和.html文件。如果您认为这是错误的，请告诉我正确的数字是多少以及如何计算它。结论仅使用Imba和ClojureScript重新架构，应用程序可以在1000LoC下实现。Clojure以极富表现力而著称。Imba最早出现在这里（cloc去年，不知道.imba文件格式），看起来它会一直存在。如果您关心您的LoC，您就知道该怎么做。FAQ#1为什么框架X、Y和Z不包含在此比较中？因为RealWorld存储库中的实现尚未完成。考虑贡献！在您选择的最喜欢的库/框架中实施解决方案，我们将在下次包含它！#2你为什么称它为现实世界？因为它不仅仅是一个待办事项应用程序。在RealWorld中，我们不会尝试比较工资、维护、生产率、学习曲线等。还有其他调查可以回答其中一些问题。我们所说的RealWorld是一个连接到服务器、进行身份验证并允许用户CRUD的应用程序，就像真实世界的应用程序一样。#3你为什么不包括我最喜欢的框架？参见上面的#1，但为了以防万一，这里又出现了：因为在RealWorld存储库中，实现尚未完成。我还没有完成所有的实现——这是社区的努力。如果你想比较一下你的框架，请考虑贡献。#4你包括哪个版本的库/框架？在撰写本文时可用（2020年3月）。此信息来自RealWorld存储库。我相信您可以在GitHub存储库中找到它。#5为什么你忘了包含一个更流行的框架？再次参见#1和#3。在RealWorld存储库中，实现尚未完成；就这么简单。如果您喜欢这篇文章，您应该在Twitter上关注我。我只写/发关于编程和技术的推文。总结请记住，这不是同类比较。有些实现使用代码拆分，有些则不使用。其中一些托管在GitHub上，一些托管在Now上，还有一些托管在Netlify上。你还在想哪一个是最好的吗？我把它留给你。（本文翻译自JacekSchae的文章《A RealWorld Comparison of Front-End Frameworks 2020》，参考：https://medium.com/dailyjs/a-realworld-comparison-of-front-end-frameworks-2020-4e50655fe4c1）
