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

Download

About The Author

Edgio

Download

在美國就地收容令的高峰期，94％的人口受到影響。雖然限制已經放寬，但美國人仍然選擇在家裏安全，並在網上購物。隨着假日季即將來臨，各種類型的企業都在迅速嘗試找出最佳解決方案來創造卓越的線上購物體驗。

為您的站點選擇正確的技術堆棧(專為性能而構建的技術堆棧)至關重要，絕不是容易的。企業必須為其業務選擇合適的電子商務平臺，CDN和前端。我們已經比較了Shopify，Magento 2和Salesforce Commerce Cloud平臺以及領先的CDN。在本文中，我們將重點介紹現代前端的性能：Angole，Next.js，Nuxt.js，React和Vue.js。我們很快發現Nuxt.js領先群組，其次是Vue.js和Next.js。請繼續閱讀我們的詳細調查結果。

React，Angular，Vue.js，Next.js–它們如何比較？

我們分析了近2,000個高流量網站子集的移動Lighthouse 6得分，這些網站執行Angular，Next.js，React和Vue.js，以揭示哪個前端提供最快的網站。我們很快發現，前方的燈塔平均得分為24分，中間值為19分。雖然這聽起來可能很低，但實際上比美國領先的500家網際網路零售商的平均性能分數高出26％的收入。

Nuxt.js和Vue.js網站為提供最快的網站而奮鬥。 Nuxt.js站點的平均分數為27，中位數為22，Vue.js站點的平均分數為27，但低中位數為20。儘管Vue.js有幾個令人印象深刻的異常，但事實證明，Nuxt.js是交付載入速度最快的網站的最可靠框架。

排名第三的是Next.js，平均績效分數為23，中間值為19.5。 Angular網站的平均值為23；但是Angular網站的性能分數分布更加多樣化，中間值低於18。性能最差的前端反應出乎意料。儘管它擁有一些電子商務大牌，包括Amazon和Groupon，但它的平均Lighthouse分數為22分，中間分數為18分。

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非常相似，它的反應是輕量級，可爲大型應用提供強大的路由解決方案。

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。 Chipotle，Subaru和BMW的表現更差，分數低於10。

Angle以幾個近乎完美的分數位居第三

角度是該集團最古老的框架，由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個最快的角網站，分別獲得98，95和83的驚人分數。只有另外兩個站點在Angular的性能排名前五位，分別是Cat.com (一家強大的機器和發動機公司)和AerLingus.com (一家航空公司)。

在平均分數以上的一些角度站點包括：分分Expedia.com分44分31分42分Android.com分PepsiCo.com分Lamborghini.com分51分。 Angular的平均燈塔得分爲26，Gamefly.com CocaCola.com，，18，19，25，17，Disney.com，BaskinRobbins.com。比平均水平低的還有Xfinity和Patagonia等品牌，分數分別為15和14。最後，數據顯示，三家航空公司是最慢的Angular網站：Delta網站3，Frontier網站2，Spirit網站1。

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

Next.js是一種開放原始碼基於反應的異構體框架，適用於伺服器端呈現的應用程式，GitHub擁有超過52,000顆星。爲了確保頁面快速加載，Next.js會自動分割代碼，並在服務器發出新請求時動態生成HTML。

該框架上的網站平均性能得分為22，8，低於平均水平。數據顯示，Next.js網站的得分低於20分，75分低於50 30分，90分低於43分。毫無疑問，旅遊和旅遊景點在Next.js中表現最佳，燈塔平均得分為29分。而最快的三個Next.js站點分別是Bartleby.com，Kelloggs.com和Holidayinnclub.com，分別得分為89，73和75。

RetailMeNot.com年和HermanMiller.com年各比框架平均燈塔分數至少超過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的燈塔分數低於10。

以不起眼的分數來應對令人印象深刻的品牌

React是Facebook於2013年開發的開放原始碼JavaScript庫。與本文中介紹的其他框架不同，React不是一個框架，而是一個UI庫，用於快速輕鬆地構建用戶界面或UI組件。它是一群最成熟的前端之一，也是GitHub上最受歡迎的項目之一，截至本部落格發布之日，它已有超過155,000顆星。

臉書指出，隨著推特和Airbnb等大型公司的反應，穩定對他們至關重要。有趣的是，性能並未按優先順序排列。數據顯示，React網站的平均分數為22，8分，比整體平均框架分數低4%。它的中位數為18，其中75％的站點的分數低於29，90％的站點的分數低於40。

服裝，配飾和鞋類是反應領域占有率最大的類別，但燈塔平均得分最高的類別是Mass Merchant，包括沃爾瑪，韋費爾，阿什利·斯圖爾特，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為25，Sur La Tab和StitchFix為24，Gap and glossier為21，Victoria’s Secret為20，Crate and Barrel為19。業界最大的失敗者是23andMe.com人，9人，百思買和托里伯奇8人，ProFlowers 6人，迪奧3人。

底線

Google Lighthouse已成為許多電子商務企業衡量其網站性能的實際工具。高性能分數表示您的站點載入速度快，最重要的是，它滿足用戶的期望。

網站速度比以往任何時候都更重要，因為各地的消費者都會上網，以避免在這場流行病中出現擁擠的商店。網站性能可能會因您使用的框架而大幅不同，從而極大地影響用戶體驗。我們通過分析現代前端框架上近2,000個高流量網站的Lighthouse性能得分，發現哪個框架提供了最快的速度。

Nuxt.js網站執行速度最快，Lighthouse的平均性能得分為27，中間值為22。 Vue.js的平均績效分數為27，中間值為20，位列亞軍。 Angular和Next.js網站的平均分數相同，為23分，但Angular的中間值較高，這使其成為第三快的框架。最後，儘管是最受歡迎的框架，但做出反應，導致性能分數最低，燈塔平均分數為22。