我們又來做這個對比了。這次是 2020 年的版本，還有之前的版本：
2019 年：
2018 年：
2017 年：
先來明確一點——這篇文章絕對不是為了告訴你該選擇哪個前端框架而寫的。它只是乙個小型而相對簡單的評測，對比三個指標：以基本相同的應用程式為基礎，評價不同框架製作出來的應用的效能、應用大小和**行數。
記住這一點後，我們來看具體的評測方法：
我們對比的基礎是 realworld 應用——這款應用不是簡單的待辦事項(to do)應用而已。常見的待辦事項應用無法為實際的應用程式構建提供足夠的知識和觀點參考。
它在某種程度上是標準化的——這是乙個符合特定規則的專案，有一套規範。專案還提供了後端 api、靜態標記和樣式。
它是由一位專家編寫或審查的——這是乙個一致的，真實世界的專案，其構建或審查工作有專家的參與。
我們要對比哪些庫 / 框架？
在撰寫本文時，在 realworld 儲存庫中有 24 種 conduit 實現。框架是否流行並不重要。唯一的參評條件是——它出現在 realworld 倉庫頁面上。
我們對比哪些指標？
效能——這款應用需要多長時間才能顯示內容並處於可用狀態？
**行數——作者需要多少行**才能基於規範建立出 realworld 應用？公平地講，某些框架做出來的應用是有很多花邊內容，但應該不會有什麼重大影響。我們要量化的唯一資料夾是每個應用中的 src/。無論它是否是自動生成的都沒關係——反正你都需要維護它的。
指標 1：效能
我們會檢查 chrome 隨附的 lighthouse audit 的效能分數。lighthouse 返回的效能分數在 0 到 100 之間。0 是最低的。更多詳細資訊，請參閱《lighthouse 計分指南》：
測試設定
基本原理
內容繪製得越快，使用者就能越早開始做事，應用的使用體驗就會越好。
備註 注意：由於缺少演示應用，因此跳過了 purescript。
結論 指標 2：大小
傳輸大小資料來自 chrome 的網路標籤。伺服器提供 gzip 壓縮後的響應標頭以及響應正文。
這裡的表現取決於框架的大小以及它新增的其他依賴項的多少。還能看出構建工具能否很好地去掉包中未使用的**。
基本原理
備註 由於缺少演示應用，因此跳過了 purescript。
angular+ngrx+nx：angular+ngrx+nx 這裡不要怪我看錯了，請檢查 chrome 開發工具網路標籤，如果我算錯了請告訴我。
rust+yew+webassembly 還包括.wasm 檔案
結論 svelte 和 stencil 社群所做的令人印象深刻的工作，將它們的應用體積壓縮到了 20kb 以下，這確實是一項成就。
指標 3：**行數
使用 cloc，我們可以計算每個儲存庫的 src 資料夾中的**行數。空白行和注釋行在這裡都不算。為什麼要考慮這個指標呢？
如果除錯是消除軟體錯誤的過程，那麼程式設計肯定就是把錯誤放入軟體的過程。 ——edsgerdijkstra基本原理
這個指標說明了給定庫 / 框架 / 語言的簡潔程度。也就是說根據規範，你需要多少行**才能實現幾乎相同的應用(其中一些有更多的花邊部分)。
備註 由於 cloc 無法處理.svelte 檔案，因此 svelte 被跳過。
由於 cloc 無法處理.riot 檔案，因此跳過了 riotjs-effector-universal-hot。
angular+ngrx：使用 /libs 資料夾完成的 loc 計算僅包括.ts 和.html 檔案。如果你認為這是錯誤的方法，請告訴我正確的數字應該是多少，以及如何計算它。
結論 只有 imba 和帶 re-frame 的 clojurescript 才能在 1000 行**內實現這個應用。clojure 以非同一般的表達方式而著稱。imba 第一次出現在這裡(去年的時候 cloc 無法分析.imba 檔案格式)，看起來它的地位會持續下去。如果你關心自己的 loc，那麼看到這裡你就該知道選什麼了。
總結
請記住，這並不是完全公平的對比。有些實現使用了**拆分，有些則沒有。其中有些託管在 github 上，有些託管在 now 上，還有些託管在 netlify 上。你還是想知道哪乙個框架最好？這個問題就留給你自己來思考吧。
常見問題 1. 為什麼評測中不包含框架 x，y 和 z？
因為在 realworld 倉庫中尚未完成實現。你可以考慮做出貢獻！用你喜歡的庫 / 框架實現這個方案，我們下次將測試它的！
2. 你為什麼叫它"真實世界"？
因為它不只是乙個待辦事項應用。在 realworld 中，我們並不是要對比薪水、維護、生產力和學習曲線等。其他一些調查可以回答其中的一些問題。我們所說的 realworld 是乙個連線到伺服器，進行身份驗證並允許使用者 crud 的應用程式，就像真實世界中的應用程式一樣。
3. 你為什麼不測試我最喜歡的框架？
請參見上面的 #1，但以防萬一再提一句：因為在 realworld 儲存庫中該實現尚未完成。我並沒有完成所有的實現——這需要社群的努力。如果你想在對比中看到你的框架，請考慮做出貢獻。
4. 你測試的是哪個版本的庫 / 框架？
同樣，請參閱 #1 和 #3。在 realworld 儲存庫中該實現尚未完成，就這麼簡單。
延伸閱讀
前端流行框架對比
譯 angular 2 vs.react 血色將至 原譯 react vs angular 2 戰爭繼續 vue.js 對比其它框架 angularjs雙向繫結的研究 angular 從 1 到 2 快速參考 知乎 react.js,angular.js,vue.js學習哪個好？react 簡介和原...
2023年前端發展趨勢
2.工程體系的再度公升級3.codeless 初現鋒芒 大一點的公司都應該有很多前端的外包，這部分同學承擔的大多是寫中後台的一些 不需要解較深的業務。之所以產生這樣的原因無疑是 正式前端員工覺得這部分 太機械化而不想寫，服務端同學又因為樣式之類的不想搞。關於中後台常用的表單，目前已經有很多的 sch...
php swoole框架效能測試對比
測試機器為虛擬機器，1核2g記憶體，php環境和mysql都在虛擬機器內。php 7.3.2 swoole 4.4.5 測試框架有 結果為分別測試五次取的平均值 ab n 1000 c 100 http host 輸出 hello world 測試結果 ab n 1000 c 100 http ho...