- 原文地址：A Real-World Comparison of Front-End Frameworks with Benchmarks (2018 update)
- 原文作者：Jacek Schae
- 譯文出自：掘金翻譯計劃
- 本文永久連結：github.com/xitu/gold-m…
- 譯者：geniusq1981
- 校對者：Hopsken 、zephyrJS
本文是是對 2017 年 12 月發表的 前端開發框架的實戰對比 一文的更新。
在對比中，我們將展示不同框架之間去實現幾乎相同的 實戰示例應用 有怎樣的差別。
實戰示例應用 為我們提供了：
- 實戰應用——不只是一個 “todo” 應用。一般來說，”todo” 應用無法充分的傳達構建一個真實應用所需要的知識和觀點。
- 標準化——符合一定開發指南的專案。提供後端 API，靜態標記，樣式和規格。
- 由專家撰寫或稽核——一個實戰專案，理想情況下，由技術專家建立或稽核。
上一版本的不足（2017 年 12 月）
✅ Angular 沒有用於生產環境。之前實戰應用倉庫列出的示例應用使用的是一個開發版本，感謝 Jonathan Faircloth，它現在已經是生產版本！
✅ Vue 沒有包含在實戰應用倉庫，因此未包括在對比中。正如你可以想象的那樣，Vue 在前端引起了很大的熱度。怎麼可以不考慮 Vue 呢？你到底是怎麼想的？這一次我們加入了Vue.js！謝謝 Emmanuel Vilsbol。
我們比較哪些庫/框架？
和 2017 年 12 月的文章一樣，我們包含了實戰應用倉庫中列出的所有實現方式。不管它有沒有大量的擁躉，唯一標準就是它出現在 實戰應用倉庫 頁面上。
前往 github.com/gothinkster… （2018 年 4 月）
我們看什麼指標？
- 效能： 應用需要多長時間能顯示出頁面內容並可用？
- 大小： 應用程式多大？我們只會比較已編譯過的的 JavaScript 檔案大小。 CSS 對於所有不同實現框架都是通用的，並且從 CDN (內容分發網路)下載。 HTML 也是通用的。所有技術都編譯或轉換成 JavaScript，因此我們只計算這些檔案的大小。
- 程式碼行數： 開發者根據開發指南需要寫多少行程式碼來做一個實戰應用？為了公平，雖然有些應用程式有一些花裡胡哨的東西，但它不應該對結果產生影響。所以我們唯一量化的目錄只用每個 app 中的 src/ 目錄。
指標 ＃1：效能
使用 Chrome 自帶的 Lighthouse Audit 工具進行 首次有效繪製 的測試。
繪製速度越快，應用的使用體驗就越好。Lighthouse 也測試 First interactive ，但對於大多數應用來說，這幾乎是相同的，而它還處於測試階段。
首次有效繪製（毫秒）——越低越好
在效能方面你可能不會看到很多差異。
指標 ＃2：大小
傳輸大小來自 Chrome 的網路標籤，包含從伺服器傳送的壓縮的響應頭和響應正文。
檔案越小，下載速度越快(並且需要解析的資料也越少)。
這取決於你的框架以及你新增的依賴庫的大小，還有你的編譯工具的好壞也有一定影響。
傳輸大小（KB）——越低越好
您可以看到 Svelte，Dojo 2 和 AppRun 做得非常好。我不能說 Elm 也表現足夠好——特別是當你看下一張圖時。我也想看看 Hyperapp 的表現。可能下次吧，Jorge Bucaran ？
指標 ＃3：程式碼行數
通過 cloc 我們計算每個倉庫的 src 資料夾中的程式碼行。空白和註釋行不會包含在內。這樣做的意義何在？
如果除錯是刪除軟體錯誤的過程，那麼程式設計就是引入錯誤的過程 — Edsger Dijkstra
程式碼行數——越少越好
您擁有的程式碼行數越少，那麼出現錯誤的概率就越小，而且你也只需要維護較小的程式碼庫。
結論
我想說，非常感謝 Eric Simons 建立了 實戰示例應用 ，還有大量的提供不同實現的貢獻者們。
更新: 感謝 Jonathan Faircloth 提供生產版本的 Angular。
如果你對這篇文章感興趣，你可以在 Twitter 和 Medium 上加我。
如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。