簡化網頁的JavaScript框架

李理

現在的網站容量太大了，根據長期跟蹤其他網站的性能及其使用技術的HTTP Archive數據統計，單個網頁大小平均約2MB。良好的移動4G連接可以在不到一秒鐘的時間內下載2MB字節。但是，今天的網頁對于連接速度慢或帶寬較小的用戶來說是個不小的問題。

當今的網站容量如此之大原因很多，其中包括廣告和跟蹤腳本，它們占據了相當多的頁面。另一個原因是網站不僅僅顯示文本和圖像，現在許多站點看起來像復雜而龐大的桌面應用程序。

為了構建這些交互式站點，許多Web開發人員都轉向使用處理常規任務的開源軟件包。這些開源工具將程序員從繁重的重復工作中解放了出來，但是它們使網頁更加繁瑣。例如Facebook用于構建用戶界面的開源React庫的容量約100 KB，但加入其他一些圖形和工具包，占用很快就要用MB計算了。

Svelte漸成Web框架主流工具

由新聞工作者和軟件開發人員里奇·哈里斯創建的新興JavaScript框架Svelte旨在讓編寫更快速、更小型的交互式網站和應用程序變得更加容易。Web開發人員肖恩說，他通過從React切換到Svelte，將個人網站的大小從187 KB減少到9 KB：“我甚至沒有試圖優化尺寸，它的容量就已經下降了。”

Web 框架層出不窮，作為主流 Web 框架之一的 Svelte，有著獨特的優勢。它不僅可以構建完整的 Web 應用程序，還可以創建自定義元素，并與其他框架制作的已有Web應用程序良好兼容。Svelte是一個有趣的客戶端/服務器框架并且可以改變我們的開發方式，它可以在構建時預先呈現JavaScript。Svelte類似于Vue.js的JavaScript框架，傳統的框架需要運行時用代碼來定義和執行模塊、保持狀態，更新視圖并且還要運行這些框架。而Svelte完全融入JavaScript中，就好像沒有引用這個框架，這種方式有益于減小文件大小。

使用框架會增加網站的容量，因為它們是應用程序代碼和用戶瀏覽器之間的中間層。這意味著開發人員除了開發自己的代碼之外，還需要將整個框架與應用程序捆綁在一起，即使他們只使用了框架的少數功能。

哈里斯是《紐約時報》的圖形編輯，他在2016年為《衛報》工作時創建并發布了Svelte的第一版。他當時開發的多個項目都涉及交互式圖形和動畫，但他擔心圖形加載時間太長會破壞用戶的數據限制。

哈里斯采取了獨特的解決方法：在開發人員將代碼上傳到Web服務器之前，Svelte執行其中間層工作。即在用戶下載代碼之前，就刪除不必要的功能，從而縮小生成的應用程序。當用戶運行應用程序時，它還減少了活動部件的數量，這可以使Svelte應用程序更快、更高效。雖然該框架創建起來更棘手，但擁護者表示，它使開發人員更容易構建高效的應用程序。

存在的爭議

一些程序員將Svelte用于網頁，但仍然將React（起源于 Facebook 的內部項目，因為對市場上所有 JavaScript MVC 框架都不滿意，Facebook就決定自己寫一套用來架設Instagram 的網站。做出來以后，發現這套東西真的很好用，就在2013年5月開源了）用于較大的應用程序或專業工作。因為應用程序越大就越有可能使用到React的所有功能，這樣浪費的容量可以忽略不計。

某些情況下Svelte應用程序甚至比使用React或類似工具制作的應用程序更大。

而且與Svelte開發人員相比，業界對React開發人員的需求更大，認可度更高。在JavaScript 2019年對兩萬名開發人員的調查中，使用Svelte的受訪者中有88%表示對它感到滿意，使其在調查中排名第二，僅次于React的89%滿意度。但只有7.8%的受訪者使用過Svelte，而24.7%的人從未聽說過。相對的有80.3%的人使用過React。為什么開發人員會猶豫學習Svelte，因為JavaScript開發的世界發展迅速，程序員已經有了令人眼花繚亂的工具。React的優勢在于得到了Facebook的支持，擁有強大的就業市場以及與之兼容的龐大第三方應用生態系統。

Svelte最適合對性能和文件大小有特別限制的情況，例如在智能電視或低功耗設備上運行的應用程序。

一些Svelte開發人員使用它來構建更大的應用程序，瑞安·阿特金森是Felt Social的創始人，該公司提供了用于構建高度可定制的社交網站的工具。他之所以選擇Svelte，是因為它可以使應用程序響應速度更快，即使它們不一定總是最小的。他說：“Svelte的體系結構可以從根本上改變構建用戶界面的游戲。”