能替代 Vue 和 React 的框架，長(zhǎng)什么樣子？
本文轉(zhuǎn)載自微信公眾號(hào)「勾勾的前端世界」，作者西嶺。轉(zhuǎn)載本文請(qǐng)聯(lián)系勾勾的前端世界公眾號(hào)。
2021年，StackOverflow(https://stackoverflow.com/) Developer 調(diào)查中，Svelte 成為最受開(kāi)發(fā)者歡迎的 Web 框架。
Svelte 是一個(gè)全新的構(gòu)建用戶(hù)界面的 Web 應(yīng)用程序。Svelte 讀法是[ / sf?lt /]，本意是苗條的，細(xì)長(zhǎng)的，優(yōu)美的。從2019年開(kāi)始，受到了非常多的關(guān)注，是開(kāi)源社區(qū)目前最熱門(mén)的前端框架。
Svelte 與諸如 React 和 Vue 等 JavaScript 框架類(lèi)似，都懷揣著一顆讓構(gòu)建交互式用戶(hù)界面變得更容易的心。
但是有一個(gè)關(guān)鍵的區(qū)別，Svelte 在構(gòu)建/編譯階段會(huì)將應(yīng)用程序轉(zhuǎn)換為直接應(yīng)用的 JavaScript 代碼，而不是在運(yùn)行階段解釋?xiě)?yīng)用程序的代碼。這意味著你不需要為框架所消耗的性能付出成本，并且在應(yīng)用程序首次加載時(shí)沒(méi)有額外損失。
Svelte 可以被用來(lái)構(gòu)建整個(gè)應(yīng)用程序，也可以被逐步融合到現(xiàn)有的代碼中。你還可以將組件直接作為獨(dú)立的包(package)交付，并且不會(huì)有傳統(tǒng)框架所帶來(lái)的額外開(kāi)銷(xiāo)。
在 StackOverflow 今年的調(diào)查中，Svelte 成為眾人聚焦的明星，而它目前的使用量也僅次于 Vue 位列第四，大有替代 Vue 、React 的趨勢(shì)。
傳統(tǒng)框架(如 React 和 Vue)在瀏覽器中需要做大量的工作。與使用虛擬(virtual)DOM 不同，Svelte 將這些工作放到構(gòu)建應(yīng)用程序的編譯階段來(lái)處理。有人甚至直接將 Svelte 看作前端的 “編譯器”而不是框架或者庫(kù)，由此可見(jiàn) Svelte 和其他框架的核心差異。
Vue 作者尤雨溪，曾經(jīng)對(duì) Svelte 有一段極為恰當(dāng)?shù)拿枋觯?/p>
Svelte 的核心思想在于『通過(guò)靜態(tài)編譯減少框架運(yùn)行時(shí)的代碼量』。
舉例來(lái)說(shuō)，當(dāng)前的框架無(wú)論是 React Angular 還是 Vue，不管你怎么編譯，使用的時(shí)候必然需要『引入』框架本身，也就是所謂的運(yùn)行時(shí) (runtime)。
但是用 Svelte 就不一樣，一個(gè) Svelte 組件編譯了以后，所有需要的運(yùn)行時(shí)代碼都包含在里面了，除了引入這個(gè)組件本身，你不需要再額外引入一個(gè)所謂的框架運(yùn)行時(shí)！
果然，大佬講話(huà)就是這么恰到好處的不多不少 “剛剛好”。
而在我看來(lái)，Svelte 是否適合在大型項(xiàng)目中應(yīng)用，還有待觀察。雖然核心思想是不需要 “運(yùn)行時(shí)”，但是項(xiàng)目組件越多，運(yùn)行時(shí)的代碼量也就越多，且組件間的代碼重復(fù)率也就越高，除此之外，現(xiàn)階段的周邊生態(tài)確實(shí)處于基本荒蕪的狀態(tài)。
但是，如果你對(duì)偏原生前端開(kāi)發(fā)有執(zhí)念，Svelte 絕對(duì)讓你渾身舒暢。
因?yàn)?Svelte 可以將組件作為獨(dú)立的包(package)交付，所有如果你是在微前端架構(gòu)下，做組件級(jí)開(kāi)發(fā)，Svelte 就是神兵利器。
如果你對(duì) Vue 比較熟悉，那么學(xué)習(xí) Svelte 會(huì)讓你感覺(jué) so easy，因?yàn)?Vue 和 Svelte 都在 Template 陣營(yíng)，學(xué)習(xí)成本很低。
