Home Blogs 以下哪個現代前端最快:React,Angular,Vue.js,Next.js或Nuxt.js?
Applications

以下哪個現代前端最快:React,Angular,Vue.js,Next.js或Nuxt.js?

About The Author

Outline

在美國就地避難令的高峯期,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–它們如何比較?

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

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的網站的平均燈塔得分爲27分,只比前端的平均得分高出1分。 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分。

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是前三名最快的角狀網站,分別有98,95和83個令人印象深刻的分數。 只有另外兩個網站在性能方面跌至Angular的前五位,分別是一家強大的機器和發動機公司Cat.com和一家航空公司AerLingus.com。

一些跳躍高於平均分數的角狀網站包括Android.com at 51,Expedia.com at 44,PepsiCo.com at 42和Lamborghini.com at 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。

此框架上的網站平均效能分數爲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各比其框架平均燈塔得分至少高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上最受歡迎的項目之一,截至本部落格發佈日期,它擁有超過155,000顆星。

Facebook表示,穩定性對他們至關重要,因爲像Twitter和Airbnb這樣的大型公司使用React。 有趣的是,績效並未按優先順序排列。 數據顯示React網站的平均Lighthouse得分爲22,比總體平均框架得分低8%。 它的中位值爲18,75%的站點得分低於29,90%低於40。

服裝,配飾和鞋類是REACT領域中份額最大的類別,但平均燈塔得分最高的類別是Mass Merchant,包括Walmart,Wayfair,Ashley Stewart,Nordstrom, Kroger,Sam’s Club,Groupon和Overstock。 除了類別之外,排名前3的React網站排名前98位的historicrail.com (亞馬遜擁有),排名第91位的historicaviation.com (亞馬遜擁有),排名第74位的flipkart.com (排名第74位)。

圖書館平均水平以上的其他一些大名爲亞馬遜57人,VRBO 49人,Priceline 47人,Wayfair 39人,Lowes 33人,Netflix 31人。 接近圖書館平均得分的名字分別是:目標爲25,Sur La Tab和StitchFix爲24,Gap和Grossier爲21,維多利亞的祕密爲20,Crate和Barrel爲19。 該行業的一些最大的失敗者是23andMe.com at 9, Best Buy and Tory Burch at 8, ProFlowers at 6和Dior at 3。

底線

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

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

Nuxt.js網站執行速度最快,平均Lighthouse性能得分爲27分,中位值爲22分。 Vue.js的平均性能得分爲27分,中位值爲20分。 Angular和Next.js網站的平均得分相同,平均得分爲23分,但Angular的中值較高,使其成爲第三快框架。 最後,React儘管是最受歡迎的框架,但性能得分最低,燈塔平均得分爲22。

使用Layer0 (現爲Edgio)

Layer0允許開發團隊快速輕鬆地構建和部署邊緣本地Web應用程式。 它是市場上最完整的Jamstack平臺——專爲執行React,Angular,Vue和Next.js等40多個現代框架而構建——並且已證明是開發者速度的兩倍。

還支援傳統的Web架構逐步遷移到無頭架構。 對於需要靈活性和現代化的站點,Layer0有助於降低風險並加快遷移速度,而無需更改基礎架構或執行完整的站點重寫。

Tags

Just For You