李理
現(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ì)于連接速度慢或帶寬較小的用戶來(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)建用戶界面的開(kāi)源React庫(kù)的容量約100 KB,但加入其他一些圖形和工具包,占用很快就要用MB計(jì)算了。
由新聞工作者和軟件開(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)下降了?!?/p>
Web 框架層出不窮,作為主流 Web 框架之一的 Svelte,有著獨(dú)特的優(yōu)勢(shì)。它不僅可以構(gòu)建完整的 Web 應(yīng)用程序,還可以創(chuàng)建自定義元素,并與其他框架制作的已有Web應(yīng)用程序良好兼容。Svelte是一個(gè)有趣的客戶端/服務(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)用程序代碼和用戶瀏覽器之間的中間層。這意味著開(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ì)破壞用戶的數(shù)據(jù)限制。
哈里斯采取了獨(dú)特的解決方法:在開(kāi)發(fā)人員將代碼上傳到Web服務(wù)器之前,Svelte執(zhí)行其中間層工作。即在用戶下載代碼之前,就刪除不必要的功能,從而縮小生成的應(yīng)用程序。當(dāng)用戶運(yùn)行應(yīng)用程序時(shí),它還減少了活動(dòng)部件的數(shù)量,這可以使Svelte應(yīng)用程序更快、更高效。雖然該框架創(chuàng)建起來(lái)更棘手,但擁護(hù)者表示,它使開(kāi)發(fā)人員更容易構(gòu)建高效的應(yī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)建用戶界面的游戲。”