作为一名前端开发者，持续学习是必备技能之一。随着新技术的不断涌现，前端开发框架也越来越多，各种框架和版本也相继更新。前端领域的技术日新月异，令人眼花缭乱。面对这么多的框架，我们应该如何选择呢？为此，前端开发工程师JacekSchae写了一篇博文，对目前流行的前端框架进行了总结和评测。以下是他的全文。首先，本文绝对不是教你如何选择下一个前端框架的文章。本文比较了非常相似的应用程序的性能、大小和代码行数。考虑到这一点，本文遵循以下原则：我们正在比较真实世界的应用程序，而不仅仅是“待开发”的应用程序。后者通常不会传达足够的知识和观点来实际构建应用程序。它有点标准化，一个符合一定规则的项目，有自己的规范，提供后端API、静态标记和样式。由专家编写或审查的一致的真实项目。我们比较的是哪些库/框架？在撰写本文时，RealWorld存储库中有24个管道实现。只要它出现在RealWorld回购页面上，您有多少关注者并不重要。我们看什么指标？性能：这个应用程序需要多长时间才能显示内容并变得可用？大小：应用程序有多大？我们只比较编译后的JavaScript文件的大小。HTML和CSS对所有变体都是通用的，可以从CDN（内容分发网络）下载。所有技术都被编译或转译为JavaScript，因此我们只调整此文件的大小。代码行数：作者需要多少行代码才能创建基于规范的RealWorld应用程序？公平地说，一些应用程序有更多的花里胡哨，但应该不会产生重大影响。我们量化的唯一文件夹是每个应用程序中的src/。无论是否自动生成，您都需要维护它。指标1：性能我们将检查Chrome附带的LighthouseAudit的性能分数。Lighthouse将返回0到100之间的性能分数。0是可能的最低分数。有关更多详细信息，请参阅Lighthouse评分指南。TestSetupLighthouseTestSetupTheoryFundamentalsforAllTestApps绘制内容越快，用户可以越早开始做事，他们对应用程序的体验就会越好。性能（分数0-100，越高越好）注意：由于缺少演示应用程序，因此跳过了PureScript。结论Lighthouse审计不会停止。您可以看到，今年未维护的更新应用程序已降至90个以下。如果您的应用得分高于90，则可能不会产生太大影响。也就是说，AppRun、Elm、Svelte确实令人印象深刻。指标2：大小传输大小来自Chrome网络选项卡。GZIPed响应头加上服务器传送的响应主体。这里的性能取决于框架的大小以及添加的额外依赖项。此外，构建工具如何从包中删除未使用的代码也会产生影响。理论依据文件越小，下载越快，解析越少，传输大小(KB)尽可能低PureScript由于缺少演示应用程序而被跳过。Angular+ngrx+nx：检查ChromeDevTools网络选项卡，如果我算错了请告诉我。Rust+Yew+WebAssembly还包括.wasm文件结论Svelte和Stencil社区的惊人工作使它小于20KB真是了不起。指标3：代码行使用cloc，我们计算每个repo的src文件夹中的代码行数。空白行和注释行不是此计算的一部分。这样做到底有什么意义？如果调试是消除软件错误的过程，那么编程一定是产生错误的过程——EdsgerDijkstra理论基础这显示了给定库、框架、语言的简单性。根据规范，如果您自己编写几乎相同的应用程序，需要多少行代码？代码行越少越好，在原始版本后添加了Svelte-感谢Sveltemaster。由于cloc无法处理.riot文件，因此跳过了Riotjs-effector-universal-hot。Angular+ngrx：LoC计算仅使用/libs文件夹完成，包括.ts和.html文件。如果您认为这是错误的，请告诉我您是如何计算的。结论只有Imba和ClojureScriptreframe才能实现1000LoC下的应用。Clojure以其非凡的表现力而闻名。Imba是第一次来这里。如果你关心LoC，你知道该怎么做。总结请记住，这不是全面比较。有些实现使用代码拆分，有些不使用，有些托管在GitHub上，有些托管在Now上，有些托管在Netlify上。如果您想知道哪一个是最好的，请尝试自己进行比较。常见问题解答1.为什么框架X、Y和Z未包含在此比较中？因为RealWorld回购没有完成实施。在您最喜欢的库/框架中实施该解决方案，我们将在下次包含它！2.为什么叫RealWorld？因为它不仅仅是一个待办事项应用程序。在RealWorld，我们不会尝试比较工资、维护、生产率、学习曲线等。还有其他调查可以回答这些问题。我们所说的RealWorld是指连接到服务器、验证并允许用户进行CRUD的应用程序，就像真实应用程序所做的那样。3.为什么没有包含我最喜欢的框架？请参阅上面的第一个问题：因为RealWorld回购尚未完成实施。这是社区努力的成果。如果您想比较一下您的框架，请考虑贡献。4.这里包含哪个版本的库/框架？包含2020年3月提供的版本，来自RealWorld存储库的信息。您可以从GitHub存储库中找到它。5.为什么你忘记在比较中包括一个比这个更流行的框架？RealWorldrepo的实现并不完整，很简单。本文转载自雷锋网。如需转载，请在雷锋网官网申请授权。
