簡(jiǎn)化網(wǎng)頁(yè)的JavaScript框架

李理

現(xiàn)在的網(wǎng)站容量太大了，根據(jù)長(zhǎng)期跟蹤其他網(wǎng)站的性能及其使用技術(shù)的HTTP Archive數(shù)據(jù)統(tǒng)計(jì)，單個(gè)網(wǎng)頁(yè)大小平均約2MB。良好的移動(dòng)4G連接可以在不到一秒鐘的時(shí)間內(nèi)下載2MB字節(jié)。但是，今天的網(wǎng)頁(yè)對(duì)于連接速度慢或帶寬較小的用戶(hù)來(lái)說(shuō)是個(gè)不小的問(wèn)題。

當(dāng)今的網(wǎng)站容量如此之大原因很多，其中包括廣告和跟蹤腳本，它們占據(jù)了相當(dāng)多的頁(yè)面。另一個(gè)原因是網(wǎng)站不僅僅顯示文本和圖像，現(xiàn)在許多站點(diǎn)看起來(lái)像復(fù)雜而龐大的桌面應(yīng)用程序。

為了構(gòu)建這些交互式站點(diǎn)，許多Web開(kāi)發(fā)人員都轉(zhuǎn)向使用處理常規(guī)任務(wù)的開(kāi)源軟件包。這些開(kāi)源工具將程序員從繁重的重復(fù)工作中解放了出來(lái)，但是它們使網(wǎng)頁(yè)更加繁瑣。例如Facebook用于構(gòu)建用戶(hù)界面的開(kāi)源React庫(kù)的容量約100 KB，但加入其他一些圖形和工具包，占用很快就要用MB計(jì)算了。

Svelte漸成Web框架主流工具

由新聞工作者和軟件開(kāi)發(fā)人員里奇·哈里斯創(chuàng)建的新興JavaScript框架Svelte旨在讓編寫(xiě)更快速、更小型的交互式網(wǎng)站和應(yīng)用程序變得更加容易。Web開(kāi)發(fā)人員肖恩說(shuō)，他通過(guò)從React切換到Svelte，將個(gè)人網(wǎng)站的大小從187 KB減少到9 KB：“我甚至沒(méi)有試圖優(yōu)化尺寸，它的容量就已經(jīng)下降了。”

Web 框架層出不窮，作為主流 Web 框架之一的 Svelte，有著獨(dú)特的優(yōu)勢(shì)。它不僅可以構(gòu)建完整的 Web 應(yīng)用程序，還可以創(chuàng)建自定義元素，并與其他框架制作的已有Web應(yīng)用程序良好兼容。Svelte是一個(gè)有趣的客戶(hù)端/服務(wù)器框架并且可以改變我們的開(kāi)發(fā)方式，它可以在構(gòu)建時(shí)預(yù)先呈現(xiàn)JavaScript。Svelte類(lèi)似于Vue.js的JavaScript框架，傳統(tǒng)的框架需要運(yùn)行時(shí)用代碼來(lái)定義和執(zhí)行模塊、保持狀態(tài)，更新視圖并且還要運(yùn)行這些框架。而Svelte完全融入JavaScript中，就好像沒(méi)有引用這個(gè)框架，這種方式有益于減小文件大小。

使用框架會(huì)增加網(wǎng)站的容量，因?yàn)樗鼈兪菓?yīng)用程序代碼和用戶(hù)瀏覽器之間的中間層。這意味著開(kāi)發(fā)人員除了開(kāi)發(fā)自己的代碼之外，還需要將整個(gè)框架與應(yīng)用程序捆綁在一起，即使他們只使用了框架的少數(shù)功能。

哈里斯是《紐約時(shí)報(bào)》的圖形編輯，他在2016年為《衛(wèi)報(bào)》工作時(shí)創(chuàng)建并發(fā)布了Svelte的第一版。他當(dāng)時(shí)開(kāi)發(fā)的多個(gè)項(xiàng)目都涉及交互式圖形和動(dòng)畫(huà)，但他擔(dān)心圖形加載時(shí)間太長(zhǎng)會(huì)破壞用戶(hù)的數(shù)據(jù)限制。

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

存在的爭(zhēng)議

一些程序員將Svelte用于網(wǎng)頁(yè)，但仍然將React（起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)閷?duì)市場(chǎng)上所有 JavaScript MVC 框架都不滿意，F(xiàn)acebook就決定自己寫(xiě)一套用來(lái)架設(shè)Instagram 的網(wǎng)站。做出來(lái)以后，發(fā)現(xiàn)這套東西真的很好用，就在2013年5月開(kāi)源了）用于較大的應(yīng)用程序或?qū)I(yè)工作。因?yàn)閼?yīng)用程序越大就越有可能使用到React的所有功能，這樣浪費(fèi)的容量可以忽略不計(jì)。

某些情況下Svelte應(yīng)用程序甚至比使用React或類(lèi)似工具制作的應(yīng)用程序更大。

而且與Svelte開(kāi)發(fā)人員相比，業(yè)界對(duì)React開(kāi)發(fā)人員的需求更大，認(rèn)可度更高。在JavaScript 2019年對(duì)兩萬(wàn)名開(kāi)發(fā)人員的調(diào)查中，使用Svelte的受訪者中有88%表示對(duì)它感到滿意，使其在調(diào)查中排名第二，僅次于React的89%滿意度。但只有7.8%的受訪者使用過(guò)Svelte，而24.7%的人從未聽(tīng)說(shuō)過(guò)。相對(duì)的有80.3%的人使用過(guò)React。為什么開(kāi)發(fā)人員會(huì)猶豫學(xué)習(xí)Svelte，因?yàn)镴avaScript開(kāi)發(fā)的世界發(fā)展迅速，程序員已經(jīng)有了令人眼花繚亂的工具。React的優(yōu)勢(shì)在于得到了Facebook的支持，擁有強(qiáng)大的就業(yè)市場(chǎng)以及與之兼容的龐大第三方應(yīng)用生態(tài)系統(tǒng)。

Svelte最適合對(duì)性能和文件大小有特別限制的情況，例如在智能電視或低功耗設(shè)備上運(yùn)行的應(yīng)用程序。

一些Svelte開(kāi)發(fā)人員使用它來(lái)構(gòu)建更大的應(yīng)用程序，瑞安·阿特金森是Felt Social的創(chuàng)始人，該公司提供了用于構(gòu)建高度可定制的社交網(wǎng)站的工具。他之所以選擇Svelte，是因?yàn)樗梢允箲?yīng)用程序響應(yīng)速度更快，即使它們不一定總是最小的。他說(shuō)：“Svelte的體系結(jié)構(gòu)可以從根本上改變構(gòu)建用戶(hù)界面的游戲。”