Svelte 異于 React 和 Vue 的那些亮點(diǎn)，應(yīng)用到生產(chǎn)中里效果如何？

以下文章來(lái)源于攜程技術(shù) ，作者shuan feng

一、技術(shù)調(diào)研
最近幾年，前端框架層出不窮。近兩年，前端圈又出了一個(gè)新寵：Svelte。作者是 Rich Harris，也就是 Ractive, Rollup 和 Buble的作者，前端界的“輪子哥”。

通過(guò)靜態(tài)編譯減少框架運(yùn)行時(shí)的代碼量。一個(gè) Svelte 組件編譯之后，所有需要的運(yùn)行時(shí)代碼都包含在里面了，除了引入這個(gè)組件本身，你不需要再額外引入一個(gè)所謂的框架運(yùn)行時(shí)！

在Github上擁有 5w 多的 star！


在最新的State of JS 2021和Stack Overflow Survey 2021的排名情況中，也一定程度上反映了它的火熱程度。



在早前知乎的如何看待 svelte 這個(gè)前端框架？問(wèn)題下面，Vue的作者尤雨溪也對(duì)其做出了極高的評(píng)價(jià)：


去它的官網(wǎng)看一下：


官網(wǎng)上清楚的表明了三大特性：

? Write less code

? No virtual DOM

? Truly reactive


1.1 Write less code
顧名思義，是指實(shí)現(xiàn)相同的功能，Svelte的代碼最少。這一點(diǎn)會(huì)在后面的示例中有所體現(xiàn)。

1.2 No virtual DOM
Svelte的實(shí)現(xiàn)沒有利用虛擬DOM，要知道Vue和React的實(shí)現(xiàn)都是利用了虛擬DOM的，而且虛擬DOM不是一直都很高效的嗎？

Virtual DOM 不是一直都很高效的嗎？
其實(shí) Virtual DOM高效是一個(gè)誤解。說(shuō) Virtual DOM 高效的一個(gè)理由就是它不會(huì)直接操作原生的 DOM 節(jié)點(diǎn)，因?yàn)檫@個(gè)很消耗性能。當(dāng)組件狀態(tài)變化時(shí)，它會(huì)通過(guò)某些 diff 算法去計(jì)算出本次數(shù)據(jù)更新真實(shí)的視圖變化，然后只改變需要改變的 DOM 節(jié)點(diǎn)。

用過(guò) React 的同學(xué)可能都會(huì)體會(huì)到 React 并沒有想象中那么高效，框架有時(shí)候會(huì)做很多無(wú)用功，這體現(xiàn)在很多組件會(huì)被“無(wú)緣無(wú)故”進(jìn)行重渲染（re-render）。所謂的 re-render 是你定義的 class Component 的 render 方法被重新執(zhí)行，或者你的組件函數(shù)被重新執(zhí)行。

組件被重渲染是因?yàn)?Vitual DOM 的高效是建立在 diff 算法上的，而要有 diff 一定要將組件重渲染才能知道組件的新狀態(tài)和舊狀態(tài)有沒有發(fā)生改變，從而才能計(jì)算出哪些 DOM 需要被更新。

正是因?yàn)榭蚣鼙旧砗茈y避免無(wú)用的渲染，React 才允許你使用一些諸如 shouldComponentUpdate，PureComponent 和 useMemo 的 API 去告訴框架哪些組件不需要被重渲染，可是這也就引入了很多模板代碼。

那么如何解決 Vitual DOM 算法低效的問(wèn)題呢？最有效的解決方案就是不用 Virtual DOM！

1.3 Truly reactive
第三點(diǎn)真正的響應(yīng)式，上面也提到了前端框架要解決的首要問(wèn)題就是：當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候相應(yīng)的 DOM 節(jié)點(diǎn)會(huì)被更新，這個(gè)就是reactive。

我們先來(lái)看下Vue和React分別是如何實(shí)現(xiàn)響應(yīng)式的。

React reactive

通過(guò)useState定義countdown變量，在useEffect中通過(guò)setInterval使其每秒減一，然后在視圖同步更新。這背后實(shí)現(xiàn)的原理是什么呢？

React 開發(fā)者使用 JSX 語(yǔ)法來(lái)編寫代碼，JSX 會(huì)被編譯成 ReactElement，運(yùn)行時(shí)生成抽象的 Virtual DOM。

然后在每次重新 render 時(shí)，React 會(huì)重新對(duì)比前后兩次 Virtual DOM，如果不需要更新則不作任何處理；如果只是 HTML 屬性變更，那反映到 DOM 節(jié)點(diǎn)上就是調(diào)用該節(jié)點(diǎn)的 setAttribute 方法；如果是 DOM 類型變更、key 變了或者是在新的 Virtual DOM 中找不到，則會(huì)執(zhí)行相應(yīng)的刪除/新增 DOM 操作。

Vue reactive

用Vue實(shí)現(xiàn)同樣的功能。Vue背后又是如何實(shí)現(xiàn)響應(yīng)式的呢？


大致過(guò)程是編譯過(guò)程中收集依賴，基于 Proxy（3.x) ，defineProperty(2.x) 的 getter，setter 實(shí)現(xiàn)在數(shù)據(jù)變更時(shí)通知 Watcher。

像Vue和React這種實(shí)現(xiàn)響應(yīng)式的方式會(huì)帶來(lái)什么問(wèn)題呢？

? diff 機(jī)制為 runtime 帶來(lái)負(fù)擔(dān)

? 開發(fā)者需自行優(yōu)化性能

? useMemo

? useCallback

? React.memo

? ...

那么Svelte又是如何實(shí)現(xiàn)響應(yīng)式的呢？

Svelte reactive

其實(shí)作為一個(gè)框架要解決的問(wèn)題是當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候相應(yīng)的 DOM 節(jié)點(diǎn)會(huì)被更新（reactive），Virtual DOM 需要比較新老組件的狀態(tài)才能達(dá)到這個(gè)目的，而更加高效的辦法其實(shí)是數(shù)據(jù)變化的時(shí)候直接更新對(duì)應(yīng)的 DOM 節(jié)點(diǎn)。

這就是Svelte采用的辦法。Svelte會(huì)在代碼編譯的時(shí)候?qū)⒚恳粋€(gè)狀態(tài)的改變轉(zhuǎn)換為對(duì)應(yīng)DOM節(jié)點(diǎn)的操作，從而在組件狀態(tài)變化的時(shí)候快速高效地對(duì)DOM節(jié)點(diǎn)進(jìn)行更新。

深入了解后，發(fā)現(xiàn)它是采用了 Compiler-as-framework 的理念，將框架的概念放在編譯時(shí)而不是運(yùn)行時(shí)。你編寫的應(yīng)用代碼在用諸如 Webpack 或 Rollup 等工具打包的時(shí)候會(huì)被直接轉(zhuǎn)換為 JavaScript 對(duì) DOM 節(jié)點(diǎn)的原生操作，從而讓 bundle.js 不包含框架的 runtime。

那么 Svelte 到底可以將 bundle size 減少多少呢？以下是 RealWorld 這個(gè)項(xiàng)目的統(tǒng)計(jì)：

由上面的圖表可以看出實(shí)現(xiàn)相同功能的應(yīng)用，Svelte的bundle size大小是Vue的1/4，是React的1/20！單純從這個(gè)數(shù)據(jù)來(lái)看，Svelte這個(gè)框架對(duì)bundle size的優(yōu)化真的很大。

看到這么強(qiáng)有力的數(shù)據(jù)支撐，不得不說(shuō)真的很動(dòng)心了！

二、項(xiàng)目落地
為了驗(yàn)證Svelte在營(yíng)銷 h5 落地的可能，我們選擇了口罩機(jī)項(xiàng)目：


上圖是口罩機(jī)項(xiàng)目的設(shè)計(jì)稿，不難看出，核心邏輯不是很復(fù)雜，這也是我們選用它作為Svelte嘗試的原因。

首先項(xiàng)目的基礎(chǔ)結(jié)構(gòu)是基于svelte-webpack-starter創(chuàng)建的，集成了TypeScript、SCSS、Babel以及Webpack5。但這個(gè)基礎(chǔ)模板都只進(jìn)行了簡(jiǎn)單的支持，像項(xiàng)目中用到的一些圖片、字體等需要單獨(dú)使用loader去處理。

啟動(dòng)項(xiàng)目，熟悉的hello world：

這里看下核心的webpack配置：


當(dāng)然開發(fā)環(huán)境使用webpack有時(shí)不得不說(shuō)體驗(yàn)不太好，每次都要好幾秒，我們就用Vite來(lái)替代了，基本都是秒開：

Vite的配置也比較簡(jiǎn)單：



2.1 組件結(jié)構(gòu)差異
和 React 組件不同的是，Svelte 的代碼更像是以前我們?cè)趯?HTML、CSS 和 JavaScript時(shí)一樣（這點(diǎn)和Vue很像）。


所有的 JavaScript 代碼都位于 Svelte 文件頂部的 <script></script> 標(biāo)簽當(dāng)中。然后是 HTML 代碼，你還可以在 <style></style> 標(biāo)簽中編寫樣式代碼。組件中的樣式代碼只對(duì)當(dāng)前組件有效。這意味著在組件中為 <div> 標(biāo)簽編寫的樣式不會(huì)影響到其他組件中的 <div> 元素。

2.2 生命周期
Svelte 組件的生命周期有不少，主要用到的還是 onMount、 onDestoy、beforeUpdate、afterUpdate，onMount 的設(shè)計(jì)和 useEffect 的設(shè)計(jì)差不多，如果返回一個(gè)函數(shù)，返回的函數(shù)將會(huì)在組件銷毀后執(zhí)行，和 onDestoy 一樣：


2.3 初始狀態(tài)
接下來(lái)是對(duì)初始狀態(tài)的定義：


我們發(fā)現(xiàn)代碼在對(duì)變量更新的時(shí)候并沒有使用類似React的setState方法, 而是直接對(duì)變量進(jìn)行了賦值操作。僅僅是對(duì)變量進(jìn)行了賦值就可以引發(fā)視圖的變化, 很顯然是數(shù)據(jù)響應(yīng)的, 這也正是Svelte的truly reactive的體現(xiàn)。

2.4 條件判斷
項(xiàng)目中使用了很多的條件判斷，React由于使用了JSX，所以可以直接使用JS中的條件控制語(yǔ)句，而模板是需要單獨(dú)設(shè)計(jì)條件控制語(yǔ)法的。比如Vue中使用了v-if。


Svelte中則是采用了{(lán)#if conditions}、{:else if}、{/if}，屬于Svelte對(duì)于HTML的增強(qiáng)。

上面代碼中有這么一行：

$: buttonText = isTextShown ? 'Show less' : 'Show more'

buttonText依賴了變量isTextShown，依賴項(xiàng)變更時(shí)觸發(fā)運(yùn)算，類似Vue中的computed，這里的Svelte使用了$:關(guān)鍵字來(lái)聲明computed變量。

這又是什么黑科技呢？這里使用的是 Statements and declarations 語(yǔ)法，冒號(hào):前可以是任意合法變量字符。

2.5 數(shù)據(jù)雙向綁定
項(xiàng)目中有很多地方需要實(shí)現(xiàn)雙向綁定。我們知道React是單向數(shù)據(jù)流，所以要手動(dòng)去觸發(fā)變量更新。而Svelte和Vue都是雙向數(shù)據(jù)流。

Svelte通過(guò)bind關(guān)鍵字來(lái)完成類似v-model的雙向綁定。


2.6 列表循環(huán)
項(xiàng)目中同樣使用了很多列表循環(huán)渲染。Svelte使用 {#each items as item}{/each} 來(lái)實(shí)現(xiàn)列表循環(huán)渲染，這里的item可以通過(guò)解構(gòu)賦值，拿到item里面的值。

不得不說(shuō)有點(diǎn)像ejs


2.7 父子屬性傳遞
父子屬性傳遞時(shí)，不同于React中的props，Svelte 使用 export 關(guān)鍵字將變量聲明標(biāo)記為屬性，export 并不是傳統(tǒng) ES6 的那個(gè)導(dǎo)出，而是一種語(yǔ)法糖寫法。

注意只有 export let 才是聲明屬性


2.8 跨組件通訊（狀態(tài)管理）
既然提到了父子組件通訊，那就不得不提跨組件通訊，或者是狀態(tài)管理。這也一直是前端框架中比較關(guān)注的部分，Svelte 框架中自己實(shí)現(xiàn)了 store，無(wú)需安裝單獨(dú)的狀態(tài)管理庫(kù)。你可以定義一個(gè) writable store, 然后在不同的組件之間進(jìn)行讀取和更新：


每個(gè) writable store 其實(shí)是一個(gè) object, 在需要用到這個(gè)值的組件里可以 subscribe 他的變化，然后更新到自己組件里的狀態(tài)。在另一個(gè)組件里可以調(diào)用 set和update 更新這個(gè)狀態(tài)的值。

2.9 路由
Svelte 目前沒有提供官方路由組件，不過(guò)可以在社區(qū)中找到：

? svelte-routing

? svelte-spa-router

svelte-routing和react-router-dom 的使用方式很像：


而svelte-spa-router更像vue-router一點(diǎn)：


2.10 UI
項(xiàng)目中也用到了組件庫(kù)，通常react項(xiàng)目一般都會(huì)采用NFES UI，但畢竟是react component，在Svelte中并不適用。我們嘗試在社區(qū)中尋找合適的Svelte UI庫(kù)，查看了Svelte Material UI、Carbon Components Svelte等，但都不能完全滿足我們的需求，只能自己去重寫了（只用到了幾個(gè)組件，重寫成本不算很大）。


2.11 單元測(cè)試
單元測(cè)試用的是@testing-library/svelte：



基本用法和React是很類似的。

業(yè)務(wù)代碼遷移完畢，接著就是對(duì)原有功能case的逐一驗(yàn)證。

為了驗(yàn)證單單使用Svelte進(jìn)行開發(fā)的效果，我們沒有進(jìn)行其他的優(yōu)化，發(fā)布了一版只包含Svelte的代碼到產(chǎn)線，來(lái)看下bundle size（未做gzip前）和lighthouse評(píng)分情況：


除此之外，我們遵循lighthouse給出的改進(jìn)建議，對(duì)Performance、Accessibility和SEO做了更進(jìn)一步的優(yōu)化改進(jìn)：


Performance的提升主要得益于圖片格式支持webp以及一些資源的延遲加載，Accessibility和SEO的提升主要是對(duì)meta標(biāo)簽的調(diào)整。

三、實(shí)踐總結(jié)
通過(guò)這次技改，我們對(duì)Svelte有了一些全新的認(rèn)知。


整體來(lái)說(shuō)，Svelte 繼前端三大框架之后推陳出新，以一種新的思路實(shí)現(xiàn)了響應(yīng)式。

因其起步時(shí)間不算很長(zhǎng)，國(guó)內(nèi)使用程度仍然偏少，目前來(lái)說(shuō)其生態(tài)還不夠完備。

但這不能掩蓋其優(yōu)勢(shì)：足夠“輕”。Svelte非常適合用來(lái)做活動(dòng)頁(yè)，因?yàn)榛顒?dòng)頁(yè)一般沒有很復(fù)雜的交互，以渲染和事件綁定為主。正如文章最開始說(shuō)的，一個(gè)簡(jiǎn)單的活動(dòng)頁(yè)卻要用React那么重的框架多少有點(diǎn)委屈自己。所以對(duì)于一些營(yíng)銷團(tuán)隊(duì)，想在bundle size上有較大的突破的話，Svelte是絕對(duì)可以作為你的備選方案的。

另外現(xiàn)在社區(qū)對(duì)于Svelte還有一個(gè)很好的用法是使用它去做Web Component，好處也很明顯：

? 使用框架開發(fā)，更容易維護(hù)

? 無(wú)框架依賴，可實(shí)現(xiàn)跨框架使用

? 體積小

所以對(duì)于想實(shí)現(xiàn)跨框架組件復(fù)用的團(tuán)隊(duì)，用Svelte去做Web Component也是一個(gè)很好的選擇。

作者：shuan feng


歡迎關(guān)注微信公眾號(hào) ：前端印象