最近這些年，隨著三大框架React、Vue、Angular版本逐漸穩(wěn)定，前端技術(shù)棧的迭代似乎緩慢下來。

如果我們把目光拉伸到未來十年的視角，前端行業(yè)會出現(xiàn)哪些框架有可能會挑戰(zhàn)React、Vue、Angular呢？

嶄露頭角的 Svelte 應(yīng)該是其中的選項(xiàng)之一。

簡介

Svelte 是一個(gè)構(gòu)建 web 應(yīng)用程序的工具。它被預(yù)測為未來十年可能取代React和Vue等其他框架的新興技術(shù)。

有一個(gè)關(guān)鍵的區(qū)別：Svelte 在 構(gòu)建/編譯階段 將你的應(yīng)用程序轉(zhuǎn)換為理想的 JavaScript 應(yīng)用，而不是在 運(yùn)行階段 解釋應(yīng)用程序的代碼。這意味著你不需要為框架所消耗的性能付出成本，并且在應(yīng)用程序首次加載時(shí)沒有額外損失。

你可以使用 Svelte 構(gòu)建整個(gè)應(yīng)用程序，也可以逐步將其融合到現(xiàn)有的代碼中。你還可以將組件作為獨(dú)立的包（package）交付到任何地方，并且不會有傳統(tǒng)框架所帶來的額外開銷。

發(fā)展趨勢

開發(fā)者滿意度

從2019年開始, Svelte出現(xiàn)在榜單中。2020年，Svelte在滿意度排行榜中超越了react，躍升到了第一位。在過去的兩年里，也是碾壓三大框架的存在，還能與最新的 Solid 并駕齊驅(qū)（都是90%）。

開發(fā)者興趣度

在開發(fā)者興趣度方面，在過去的四年里，Svelte 一直蟬聯(lián)了第一。

市場占有率

2020年，Svelte 的市場占有率從第6名躍升到第4名，僅次于 React、Angular、Vue 老牌前端框架。

隨著 Svelte 在社區(qū)里慢慢流行起來，它的占有率還會提升。

在最新的《State of JS survey》中，Svelte 被預(yù)測為未來十年可能取代React和Vue等其他框架的新興技術(shù)。

Svelte 特點(diǎn)

No Runtime —— 無運(yùn)行時(shí)代碼

React 和 Vue 都是基于運(yùn)行時(shí)的框架，當(dāng)用戶在你的頁面進(jìn)行各種操作改變組件的狀態(tài)時(shí)，框架的運(yùn)行時(shí)會根據(jù)新的組件狀態(tài)（state）計(jì)算（diff）出哪些DOM節(jié)點(diǎn)需要被更新，從而更新視圖。

而 Svelte 會在編譯階段將代碼編譯到更加貼近dom操作的代碼。或者說，Svelte 生成的是命令式的dom創(chuàng)建過程，直接操作Dom。

Less Code —— 更少的代碼

我們直接來看官網(wǎng)的例子：

實(shí)現(xiàn)的功能也很簡單，就是兩個(gè)Input的值求和，然后展示出來。圖中是用svelte編寫的代碼。 看下 React 書寫的版本：

再來看下 Vue 版本：

三者對比：

單純從代碼字符數(shù)上，Svelte比Vue和React少。但就此得出說svelte的編碼體積更小，這樣是不對的。我們一起來看下編譯后的對比：

從上述對比中可以看出，svelte 編譯后的體積很少，包體積1.6k，對于一般中小型項(xiàng)目而言，整體運(yùn)行的代碼（編譯后的代碼+包體積）還是比較小的，所以可以說svelte項(xiàng)目的代碼較小。

PS: 對于大型項(xiàng)目而言，因?yàn)閟velte隨著業(yè)務(wù)的進(jìn)行，代碼編譯產(chǎn)物陡峭，大型項(xiàng)目體積并不會比react、vue等小,因此需要辯證看待。

svelte 生成的是命令式的dom創(chuàng)建過程，虛擬 dom 的框架生成的是虛擬 dom 結(jié)構(gòu)創(chuàng)建的過程（vdom 渲染函數(shù)）。在基于虛擬 DOM 的框架里，虛擬dom到真實(shí)dom的轉(zhuǎn)換過程，被封裝在運(yùn)行時(shí)里，所以每個(gè)組件虛擬 dom 創(chuàng)建過程僅僅是數(shù)據(jù)結(jié)構(gòu)的表述，更為緊湊，代碼產(chǎn)物也就比較少。

Hight-Performance ——高性能

在Virtual Dom已經(jīng)是前端框架標(biāo)配的今天， Svelte 聲稱自己是沒有Virtual Dom加持的， 那性能如何呢？

Jacek Schae 在《A RealWorld Comparison of Front-End Frameworks with Benchmarks》中用主流的前端框架來編寫 RealWorld 應(yīng)用，使用 Chrome 的Lighthouse Audit測試性能，得出數(shù)據(jù)是Svelte 略遜于Vue, 但好于 React。

Svelte 性能還不錯(cuò)，至少沒有我們預(yù)期的那么糟糕。

PS：sveltedom 是把數(shù)據(jù)和真實(shí)dom之間的映射關(guān)系，在編譯的時(shí)候就通過AST等算出來，保存在p函數(shù)中。p函數(shù)就是一堆“if(...){...}”判斷，直接保證dom的更新。同時(shí)，這也說明“如果項(xiàng)目中涉及了dom操作越多，那這個(gè)p函數(shù)就越大，編譯后的代碼提交就會增大”。

其他

本文沒有涉及 Svelte 的語法，且 Svelte 的語法極其簡單，官方教程學(xué)習(xí)文檔也比較詳細(xì)，相信大家很快就會上手語法的，這里就不做官網(wǎng)搬運(yùn)工了。附上地址供大家參閱。

官方地址
https://www.sveltejs.cn/