作者丨Jacek Schae
译者丨王强
策划丨小智
咱们又来做这个比照了。这次是 2020 年的版别，还有之前的版别：2019 年、 2018 年、 2017 年。
先来清晰一点——这篇文章绝对不是为了告知你该挑选哪个前端结构而写的。它仅仅一个小型而相对简略的评测，比照三个目标：以根本相同的运用程序为根底，点评不同结构制造出来的运用的功能、运用巨细和代码行数。
记住这一点后，咱们来看详细的评测办法：
咱们比照的根底是 RealWorld 运用——这款运用不是简略的待办事项（to do）运用罢了。常见的待办事项运用无法为实践的运用程序构建供给满足的常识和观念参阅。
它在某种程度上是标准化的——这是一个契合特定规矩的项目，有一套标准。项目还供给了后端 API、静态符号和款式。
它是由一位专家编写或查看的——这是一个共同的，实在国际的项目，其构建或查看作业有专家的参加。
1
咱们要比照哪些库 / 结构？
在编撰本文时，在 RealWorld 存储库中有 24 种 Conduit 完结。结构是否盛行并不重要。仅有的参评条件是——它呈现在 RealWorld 库房页面上。
2
咱们比照哪些目标？
功能——这款运用需求多长时间才干显现内容并处于可用状况？
巨细——这款运用有多大？咱们只会比照已编译的 Javascript 文件的巨细。HTML 和 CSS 对一切变体都是通用的，而且是从 CDN（内容交给网络）下载的。一切技能都能够编译或转译为 Javascript，因而咱们只看这个文件的巨细。
代码行数——作者需求多少行代码才干依据标准创建出 RealWorld 运用？公正地讲，某些结构做出来的运用是有许多花边内容，但应该不会有什么严重影响。咱们要量化的仅有文件夹是每个运用中的 src/。不管它是否是主动生成的都没联系——横竖你都需求保护它的。
目标 1：功能
咱们会查看 Chrome 随附的 Lighthouse Audit 的功能分数。Lighthouse 回来的功能分数在 0 到 100 之间。0 是最低的。更多详细信息，请参阅《Lighthouse 计分攻略》。
测验设置
根本原理
内容制作得越快，用户就能越早开端干事，运用的运用体会就会越好。
功能（0-100 点）——越高越好
留意：由于短少演示运用，因而越过了 Purescript。
定论
Lighthouse Audit 不会扯谎。你能够正常的看到在本年未保护 / 未更新的结构做出来的运用跌破 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
根本原理
这个目标说明晰给定库 / 结构 / 言语的简练程度。也便是说依据标准，你需求多少行代码才干完结简直相同的运用（其间一些有更多的花边部分）。
代码行数——越少越好
补白：由于 cloc 无法处理.svelte 文件，因而 Svelte 被越过。
由于 cloc 无法处理.riot 文件，因而越过了 riotjs-effector-universal-hot。
Angular+ngrx：运用 /libs 文件夹完结的 LoC 核算仅包括.ts 和.html 文件。假如你以为这是过错的办法，请告知我正确的数字应该是多少，以及怎么核算它。
3
定论
只要 Imba 和带 re-frame 的 Clojurescript 才干在 1000 行代码内完结这个运用。Clojure 以非同一般的表达方式而著称。Imba 第一次呈现在这儿（上一年的时分 cloc 无法剖析.imba 文件格局），看起来它的位置会继续下去。假如你关怀自己的 LoC，那么看到这儿你就该知道选什么了。
4
总结
请记住，这并不是彻底公正的比照。有些完结运用了代码拆分，有些则没有。其间有些保管在 GitHub 上，有些保管在 Now 上，还有些保管在 Netlify 上。你仍是想知道哪一个结构最好？这样的一个问题就留给你自己来考虑吧。
5
常见问题
1. 为什么评测中不包括结构 X，Y 和 Z？
由于在 RealWorld 库房中没有完结完结。你可优先考虑做出奉献！用你喜爱的库 / 结构完结这个计划，咱们下次将测验它的！
2. 你为什么叫它 " 实在国际 "？
由于它不仅仅一个待办事项运用。在 RealWorld 中，咱们并不是要比照薪水、保护、生产力和学习曲线等。其他一些查询能够答复其间的一些问题。咱们所说的 RealWorld 是一个连接到服务器，进行身份验证并答应用户 CRUD 的运用程序，就像实在国际中的运用程序相同。
3. 你为啥不测验我最喜爱的结构？
请拜见上面的 #1，但以防万一再提一句：由于在 RealWorld 存储库中该完结没有完结。我并没有完结一切的完结——这需求社区的尽力。假如你想在比照中看到你的结构，请考虑做出奉献。
4. 你测验的是哪个版别的库 / 结构？
在编撰本文时（2020 年 3 月）可用的版别。这儿的信息来自 RealWorld 库房。你能够在 GitHub 存储库中找到相关数据。
5. 为什么你忘了测验一个比较盛行的结构？
相同，请参阅 #1 和 #3。在 RealWorld 存储库中该完结没有完结，就这么简略。
参阅链接：
https://medium.com/dailyjs/a-realworld-comparison-of-front-end-frameworks-2020-4e50655fe4c1
点个在看少个 bug
