哪个现代前端最快：React，Angular，Vue.js，Next.js或Nuxt.js？

Download

About The Author

Edgio

Download

在美国就地避难所订单达到高峰时，94%的人口受到影响。虽然限制已经放松,美国人仍然选择在自己的家里安全和网上购物. 随着假日季节的到来,各种各样的企业都在迅速尝试找出最佳的解决方案,以创造一个卓越的在线购物体验。

为您的站点选择合适的技术堆栈(专为性能而打造的技术堆栈)至关重要，而且绝不容易。企业必须为其业务选择合适的电子商务平台，CDN和前端。我们已经比较了Shopify，Magento 2和Salesforce Commerce Cloud平台以及领先的CDN。在本文中,我们将重点介绍现代前端的性能: Angular，Next.js，Nuxt.js，React和Vue.js。我们很快就发现Nuxt.js是该软件包的领导者，紧随其后的是Vue.js和Next.js。请继续阅读我们的详细调查结果。

React，Angular，Vue.js，Next.js，Nuxt.js–它们如何比较？

我们对运行Angular，Next.js，Nuxt.js，React和Vue.js的近2，000个高流量网站的子集进行了移动灯塔6分数分析，以揭示哪个前端提供了最快的网站。我们很快就发现，Lighthouse在前端的平均得分是24分，中位数是19分。虽然这听起来可能很低,但实际上比美国领先的500家互联网零售商的平均绩效得分高出26 %。

Nuxt.js和Vue.js网站力争提供最快的网站。 Nuxt.js站点的Lighthouse平均得分为27分，中位数为22分，Vue.js站点的平均得分为27分，但中位数为20分。虽然Vue.js有几个令人印象深刻的离群值,但事实证明Nuxt.js是交付加载速度最快的网站的最可靠的框架。

排名第三的是Next.js,平均表现得分为23分,中位数为19.5分。 Angular网站的平均值为23；然而，Angular网站的性能得分分布更加多样化，中位数低于18。表现最差的前线反应令人惊讶。 Lighthouse的平均得分为22分，中位数为18分，尽管它拥有一些电子商务领域最大的品牌，包括亚马逊和Groupon。

Nuxt.js是最快的电子商务Web框架

Nuxt.js是一个基于Vue.js，Node.js，webpack和Babel.js的开放源代码，无服务器框架，创建用于快速构建复杂的同构应用程序。此框架的优点包括自动代码拆分，页面缓存和预取。 Layer0很荣幸能成为Nuxt.js的赞助商,帮助推广现代，开放源代码框架,促进更快的Web。目前,Nuxt.js在GitHub上有29.4K星。

使用Next.js的网站的Lighthouse平均得分稳定为27分，仅高于前端的平均得分。 Nuxt.js站点的中位评分下降至22分，表示分布呈正偏斜。按百分位数计算，35分表示第75百分位数，49分表示第90百分位数。与其他框架相比，此框架的得分差异较少，证明其能够始终接近平均水平提供Lighthouse绩效得分。然而,这些数据也告诉我们,Nuxt.js网站并没有提供极高的分数或近乎完美的分数(在90年代),例如Vue.js或Angular网站等框架,这些将在下一节中讨论。

重工业和工程是最快的Nuxt.js网站的类别,平均性能得分为37分,比其框架的平均得分快42%。除此之外，最快的Nuxt.js网站是Appycouple.com，NJtransit.com和WPS.com，分别有68分，63分和48分。 trivago.com，TrueandCo.com和Garmin.com也超过了框架的平均水平，显著的性能得分分别为47分，36分和35分。任天堂的平均得分为20分，低于10分的是Nespresso.com和DolceVita.com。

vue.js排名亚军

Vue.js是一个开源JavaScript框架,用于构建单页应用程序,自2014年推出以来,在6年内,这些应用程序的普及度迅速提高。它在GitHub上拥有超过171,000颗星星,使其成为最受欢迎的现代框架。它的主要特点是它使开发人员能够快速构建快速增长的JavaScript应用程序。它与Angular和React非常相似，因为它重量轻，可为大型应用提供强大的路由解决方案。

Vue.js网站的性能得分第二高,平均为27分,中位分数为20分,其中一半网站的分数高于或低于20分。在百分位数基础上，75%的Vue.js研究中心的性能评分≤34分，90%的研究中心的绩效评分≥55分。

该领域中最快的网站类别是爱好和休闲网站,平均得分为37分,包括尼康和富士胶片。该类别的表现比Vue.js网站的平均表现好37%。 Vue.js排名前3的网站是PaintScratch.com，iMobie.com和EmmaOneSock.com，分数分别为96，93和92–几乎完美的性能分数。

排名下降，数据显示FactoryChryslerParts.com得分68，In-n-Out.com得分61，Poshmark.com得分53，LouisVuitton.com得分34—全部超过Vue.js的平均值。令人印象深刻的是Sunglasshut.com，WestElm.com，Anthropologie.com，UrbanOutfitters.com和Chewy.com，得分低至10-15。奇波特尔，斯巴鲁和宝马的表现更差,得分低于10分。

Angular排名第三，有几个近乎完美的分数

Angular是该集团最古老的框架,由Google于2010年创建和开发,在GitHub上拥有超过65,000颗星星。对于计划快速扩展其网站的大型企业网站来说，这是一个流行的解决方案，因为Angular以更复杂的应用程序而闻名。

Angular网站的平均性能得分为23分，中位数为18分，表明分布呈正向倾斜。 75%的Angular网站持有Lighthouse评分为30分或以下,90%持有50分或以下。在分类层面上,健康网站在这个框架上表现最好,平均得分为28分。其中一些保健网站包括CVS.com，VitaminShoppe.com，LifetimeFtiness.com和Plexus.com。

Deichmann.com，MegaBus.com和ShopStyle.com排名前3位的Angular网站,得分分别为98，95和83。只有另外两个网站的性能排在Angular的前五位，分别是强大的机器和发动机公司Cat.com和航空公司AerLingus.com。

一些高于平均分数的Angular网站包括Android.com 51，Expedia.com 44，PepsiCo.com 42和Lamborghini.com 31。接近Angular的平均灯塔得分是Sears为26分，Gamefly.com为25分，BaskinRobbins.com为19分，Disney.com为18分，CocaCola.com为17分。低于平均水平的品牌包括Xfinity和Patagonia等,得分分别为15分和14分。最后，数据显示三家航空公司是速度最慢的Angular网站：Delta at 3，Frontier at 2和Spirit at 1。

next.js比平均性能得分低8%

next.js是一个开源的基于反应的同构框架,用于服务器端渲染应用,在GitHub上有超过52,000颗星。为确保快速加载页面,Next.js会自动拆分代码,并在服务器收到新请求时动态生成HTML。

此框架上的网站平均Lighthouse性能得分为22分，比平均水平低8%。数据显示,50%的Next.js网站的评分低于20分,75%的网站的评分低于30分,90%的网站的评分低于43分。毫无疑问,Next.js的旅游和旅游网站表现最好,灯塔的平均得分为29分。最快的三个Next.js网站是Bartleby.com，Kelloggs.com和Holidayinnclub.com，分别得分为89分，73分和75分。

RetailMeNot.com和HermanMiller.com的平均Lighthouse评分均超过了至少21%，而Sears.com，AlexanderMcQueen.com，Ticketmaster.com和RedRobin.com的平均评分分别为26，23，22和22。一些业绩不佳的大公司包括EddieBauer.com，TragerGrilles.com，Bonobos.com和Smirnoff.com，得分介于10-15之间。 YankeeCandle.com，ProFlowers.com，LiveNation.com，23andMe.com，Gymboree.com，Dior.com和Farri.com的Lighthouse评分低于10分。

React主持人得分不高，令人印象深刻的品牌

React是Facebook在2013年开发的开源JavaScript库。与本文介绍的其余框架不同，React不是一个框架，而是一个UI库，用于快速轻松地构建用户界面或UI组件。它是这群人中最成熟的前端之一,也是GitHub上最受欢迎的项目之一,截至本博客发布之日,已有超过15.5万颗明星。

Facebook表示稳定性对他们来说至关重要,因为像Twitter和Airbnb这样的大型公司也做出了反应。有趣的是，绩效并未按优先顺序排列。数据显示React网站的Lighthouse平均得分为22分，比总体平均框架得分低8%。它的中位数为18，75%的网站得分低于29分，90%的网站得分低于40分。

服装，配饰和鞋类是React领域份额最大的类别，但Lighthouse平均得分最高的类别是Mass Merchant的类别，包括沃尔玛，Wayfair，Ashley Stewart，Nordstrom，Kroger，Sam’s Club，Groupon和Overstock。除了类别之外，前3个反应最快的网站排名为historicrail.com (由亚马逊拥有) 98，historicaviation.com (由亚马逊拥有) 91和flipkart.com (由亚马逊拥有) 74。

图书馆平均水平以上的其他一些大牌包括亚马逊57，VRBO 49，Priceline 47，Wayfair 39，Lowes 33和Netflix 31。接近图书馆平均分数的名字是Target at 25, Sur La Tab和StitchFix at 24, Gap和glossier在21,维多利亚的秘密在20,以及Crate和Barrell在19。业内最大的输家包括23andMe.com 9，百思买和Tory Burch 8，ProFlowers 6和Dior迪奥3。

底线

Google Lighthouse已成为许多电子商务企业衡量其网站性能的事实工具。高性能分数表示您的网站可以快速加载，最重要的是，它满足了用户的期望。

网站速度比以往任何时候都更加重要，在这场大流行病期间，各地的消费者都会上网，以避免商店拥挤。根据您使用的框架，网站性能可能会发生巨大变化，这将极大地影响用户体验。我们通过分析现代前端框架上近2，000个高度流量的网站的Lighthouse性能得分，发现哪个框架提供了最快的速度。

Nuxt.js网站表现最快,平均Lighthouse性能得分为27分,中间值为22分。 vue.js是亚军,平均表现得分相同,为27分,中位数为20分。 Angular和Next.js网站的平均得分相同为23分,但Angular的中位数较高,使其成为第三快的框架。最后，反应虽然是最流行的框架，但性能得分最低，Lighthouse的平均得分为22。