能替代 Vue 和 React 的框架，長什麼樣子？

​2021年，StackOverflow Developer 調查中，Svelte 成爲最受開發者歡迎的 Web 框架。

Svelte 是一個全新的構建用戶界面的 Web 應用程序。Svelte 讀法是[ / sfɛlt /]，本意是苗條的，細長的，優美的。從2019年開始，受到了很是多的關注，是開源社區目前最熱門的前端框架。

Svelte 與諸如 React 和 Vue 等 JavaScript 框架相似，都懷揣着一顆讓構建交互式用戶界面變得更容易的心。

可是有一個關鍵的區別，Svelte 在構建/編譯階段會將應用程序轉換爲直接應用的 JavaScript 代碼，而不是在運行階段解釋應用程序的代碼。這意味着你不須要爲框架所消耗的性能付出成本，而且在應用程序首次加載時沒有額外損失。

Svelte 能夠被用來構建整個應用程序，也能夠被逐步融合到現有的代碼中。你還能夠將組件直接做爲獨立的包（package）交付，而且不會有傳統框架所帶來的額外開銷。

在 StackOverflow 今年的調查中，Svelte 成爲衆人聚焦的明星，而它目前的使用量也僅次於 Vue 位列第四，大有替代 Vue 、React 的趨勢。

傳統框架（如 React 和 Vue）在瀏覽器中須要作大量的工做。與使用虛擬（virtual）DOM 不一樣，Svelte 將這些工做放到構建應用程序的編譯階段來處理。有人甚至直接將 Svelte 看做前端的 「編譯器」而不是框架或者庫，因而可知 Svelte 和其餘框架的核心差別。

Vue 做者尤雨溪，曾經對 Svelte 有一段極爲恰當的描述：

Svelte 的核心思想在於『經過靜態編譯減小框架運行時的代碼量』。

舉例來講，當前的框架不管是 React Angular 仍是 Vue，無論你怎麼編譯，使用的時候必然須要『引入』框架自己，也就是所謂的運行時 (runtime)。

可是用 Svelte 就不同，一個 Svelte 組件編譯了之後，全部須要的運行時代碼都包含在裏面了，除了引入這個組件自己，你不須要再額外引入一個所謂的框架運行時！

果真，大佬講話就是這麼恰到好處的很少很多 「剛恰好」。

而在我看來，Svelte 是否適合在大型項目中應用，還有待觀察。雖然核心思想是不須要 「運行時」，可是項目組件越多，運行時的代碼量也就越多，且組件間的代碼重複率也就越高，除此以外，現階段的周邊生態確實處於基本荒蕪的狀態。

可是，若是你對偏原生前端開發有執念，Svelte 絕對讓你渾身舒暢。

由於 Svelte 能夠將組件做爲獨立的包（package）交付，全部若是你是在微前端架構下，作組件級開發，Svelte 就是神兵利器。

若是你對 Vue 比較熟悉，那麼學習 Svelte 會讓你感受 so easy，由於 Vue 和 Svelte 都在 Template 陣營，學習成本很低。

固然，我這裏就再也不貼一下基本語法的使用規則了，若是你感興趣，那請點個贊告訴我，點贊過 100 ，我會單獨錄製 Svelte 教程視頻給你哦。