Svelte 的定位
Svelte 將自己定于成編譯器框架。在編譯器中將聲明式的代碼（類似于 Vue）轉(zhuǎn)換成原生 Javascript祭椰。同時疲陕， Svelte 對響應式編程支持的良好，開發(fā)者可以使用更少的代碼完成數(shù)據(jù)到UI的開發(fā)工作鸭轮。
Svelte 開發(fā)理念與 Vue 和 React 的組件開發(fā)理念相似，但實現(xiàn)方式與 Vue 和 React 有本質(zhì)的不同邑蒋。 Vue 和 React 都使用虛擬 DOM 的方式按厘，在運行時對虛擬 DOM 的變更進行跟蹤，并計算最小的 DOM 更新量卿堂。Svelte 是在編譯時直接將應用編譯成原生 Javascript 對 DOM 操作的接口懒棉。相比虛擬 DOM 的方式，Svelte 的方式打包后的代碼體積更小執(zhí)行效率更高穗慕。
Svelte 與 Vue 和 React 對比
最新穩(wěn)定版本
| Svelte | Vue | React | |
|---|---|---|---|
| 最新穩(wěn)定版 | v3.16.0 | V2.6.10 | V16.12.0 |
性能
Svelte 性能整體表現(xiàn)優(yōu)于 Vue 和 React妻导。在操作大規(guī)模 DOM 節(jié)點時怀各，性能表現(xiàn)優(yōu)于基于虛擬 DOM 的 Vue 和 React术浪。 經(jīng)過 Svelte 編譯過的代碼體積小，所以在首屏加載時有明顯的優(yōu)勢硕蛹。
| 類目 | Svelte | Vue | React |
|---|---|---|---|
| 創(chuàng)建 1000 行表格 | 132.3 ms | 162.3 ms | 165.7 ms |
| 創(chuàng)建 10000 行表格 | 1,212 ms | 1,252 ms | 1,594.9 ms |
| 在 1000 行表格中交換兩行 | 51.8 ms | 66.6 ms | 429.6 ms |
| 首屏加載時間 | 19.5 ms | 59.6 ms | 55.6 ms |
性能數(shù)據(jù)來自 JS framework benchmark
構建大型項目
以下列舉構在建大型項目時硕并，框架需要具有的基本能力。 Svelte 目前尚處在起步階段壶栋，對于大型項目必要的應用狀態(tài)管理 和 單元測試 并沒有完整的方案普监。目前在大型應用中使用 Svelte , 需要謹慎評估維護性和穩(wěn)定性風險。
| 類目 | Svelte | Vue | React |
|---|---|---|---|
| UI 組件庫 | Material design | Element UI / AntD | AntD / Material design |
| 狀態(tài)管理 | 無 | Vuex | Redux/MobX |
| 路由 | Svelte-router | Vue-router | React-router |
| 服務端渲染 | 支持 | 支持 | 支持 |
| 測試工具 | 官方網(wǎng)站沒有相關內(nèi)容 | @vue/test-utils | Jest |
開源社區(qū)
React 在全球范圍內(nèi)擁有最多的貢獻者毙玻，也客觀反映出 React 是工程師參與度最高的前端框架廊散。Svelte 作為新發(fā)布不久的框架，有著與 Vue 差不多的貢獻者运准，可以反映出 Svelte 的受關注度高缭受，發(fā)展迅速。建議密切關注 Svelte 的發(fā)展米者。
| 類目 | Svelte | Vue | React |
|---|---|---|---|
| GitHub start | 27.2 k | 153 k | 140 k |
| 貢獻者 | 246 位 | 282 位 | 1,340 位 |
| 最近一個月提交統(tǒng)計（Nov 4, 2019 – Dec 4, 2019） | Excluding merges, 25 authors have pushed 114 commits to master and 148 commits to all branches. On master, 283 files have changed and there have been 4,388 additions and 2,107 deletions. | Excluding merges, 2 authors have pushed 4 commits to dev and 8 commits to all branches. On dev, 2 files have changed and there have been 50 additions and 48 deletions. | Excluding merges, 14 authors have pushed 56 commits to master and 56 commits to all branches. On master, 211 files have changed and there have been 15,165 additions and 2,353 deletions. |
結(jié)論
綜合以上分析胰丁，分析結(jié)論如下：
Svelte 提出的編譯器框架方式是未來前端框架的發(fā)展趨勢喂分。編譯器框架帶來的優(yōu)勢非常明顯：編譯后代碼體積小， 瀏覽器解析速度快妻顶。同時，Svelte 的響應式編程的支持更好幔嗦，能節(jié)省代碼量沥潭，并提高運行效率。
在小型項目中钝鸽， Svelte 值得嘗試拔恰，它能帶來更快的加載速度，更快的性能颜懊，和更小的網(wǎng)絡傳輸量。
在大型項目中匠璧，可以在需要性能優(yōu)化的模塊使用 Svelte 進行開發(fā)咸这，并構建出純 Javascript 組件供其他框架使用（此方案需要進一步驗證）。
小型項目：不超過10個頁面媳维，簡單跳轉(zhuǎn)邏輯的應用侄刽。例如：移動端的一些 H5 活動宣傳頁，公眾號應用等
大型項目：20 + 頁面唠梨，有復雜業(yè)務邏輯的應用。 例如：中臺系統(tǒng)前端茬故，ERP 系統(tǒng)前端等
