[译] 前端开发框架的实战对比（2018 年更新）

• 原文地址：A Real-World Comparison of Front-End Frameworks with Benchmarks (2018 update)
• 原文做者：Jacek Schae
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：geniusq1981
• 校对者：Hopsken 、zephyrJS

本文是是对 2017 年 12 月发表的 前端开发框架的实战对比 一文的更新。

在对比中，咱们将展现不一样框架之间去实现几乎相同的 实战示例应用 有怎样的差异。

实战示例应用 为咱们提供了：

1. 实战应用——不仅是一个 "todo" 应用。通常来讲，"todo" 应用没法充分的传达构建一个真实应用所须要的知识和观点。
2. 标准化——符合必定开发指南的项目。提供后端 API，静态标记，样式和规格。
3. 由专家撰写或审核——一个实战项目，理想状况下，由技术专家建立或审核。

上一版本的不足（2017 年 12 月）

✅ Angular 没有用于生产环境。以前实战应用仓库列出的示例应用使用的是一个开发版本，感谢 Jonathan Faircloth，它如今已是生产版本！

✅ Vue 没有包含在实战应用仓库，所以未包括在对比中。正如你能够想象的那样，Vue 在前端引发了很大的热度。怎么能够不考虑 Vue 呢？你究竟是怎么想的？这一次咱们加入了Vue.js！谢谢 Emmanuel Vilsbol。

咱们比较哪些库/框架？

和 2017 年 12 月的文章同样，咱们包含了实战应用仓库中列出的全部实现方式。无论它有没有大量的拥趸，惟一标准就是它出如今 实战应用仓库 页面上。

前往 github.com/gothinkster… （2018 年 4 月）

咱们看什么指标？

1. 性能： 应用须要多长时间能显示出页面内容并可用？
2. 大小： 应用程序多大？咱们只会比较已编译过的的 JavaScript 文件大小。 CSS 对于全部不一样实现框架都是通用的，而且从 CDN (内容分发网络)下载。 HTML 也是通用的。全部技术都编译或转换成 JavaScript，所以咱们只计算这些文件的大小。
3. 代码行数： 开发者根据开发指南须要写多少行代码来作一个实战应用？为了公平，虽然有些应用程序有一些花里胡哨的东西，但它不该该对结果产生影响。因此咱们惟一量化的目录只用每一个 app 中的 src/ 目录。

指标 ＃1：性能

使用 Chrome 自带的 Lighthouse Audit 工具进行 首次有效绘制 的测试。

绘制速度越快，应用的使用体验就越好。Lighthouse 也测试 First interactive ，但对于大多数应用来讲，这几乎是相同的，而它还处于测试阶段。

首次有效绘制（毫秒）——越低越好

在性能方面你可能不会看到不少差别。

指标 ＃2：大小

传输大小来自 Chrome 的网络标签，包含从服务器传送的压缩的响应头和响应正文。

文件越小，下载速度越快(而且须要解析的数据也越少)。

这取决于你的框架以及你添加的依赖库的大小，还有你的编译工具的好坏也有必定影响。

传输大小（KB）——越低越好

您能够看到 Svelte，Dojo 2 和 AppRun 作得很是好。我不能说 Elm 也表现足够好——特别是当你看下一张图时。我也想看看 Hyperapp 的表现。可能下次吧，Jorge Bucaran ？

指标 ＃3：代码行数

经过 cloc 咱们计算每一个仓库的 src 文件夹中的代码行。空白和注释行不会包含在内。这样作的意义何在？

若是调试是删除软件错误的过程，那么编程就是引入错误的过程 — Edsger Dijkstra

代码行数——越少越好

您拥有的代码行数越少，那么出现错误的几率就越小，并且你也只须要维护较小的代码库。

结论

我想说，很是感谢 Eric Simons 建立了 实战示例应用 ，还有大量的提供不一样实现的贡献者们。

更新: 感谢 Jonathan Faircloth 提供生产版本的 Angular。

若是你对这篇文章感兴趣，你能够在 Twitter 和 Medium 上加我。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。