背景
svelte是新晉的前端框架。在打包體積和頁面顯示性能上有著不可磨滅的意義∪龊海現(xiàn)在越來越多網(wǎng)站上都已經(jīng)能看到它的身影溺职。之前我也對(duì)它的源碼有了深入的解讀，《Svelte筆記三：runtime源碼解讀》和《Svelte筆記四：compile源碼解析》兩篇文章可以作為參考赛不。 svelte的優(yōu)勢(shì)很明顯惩嘉， 主要在體積極小和預(yù)編譯組件邏輯。沒有virtual dom踢故，讓業(yè)務(wù)代碼更加純粹地集中在頁面顯示上文黎。
web component 一直是大家很想落地的一個(gè)瀏覽器新技術(shù)惹苗，但是實(shí)際應(yīng)用上我們卻很難看到。即使是在微前端方面它都非常難落地耸峭。web component和Server Side Rendering（SSR）的兩個(gè)概念是不搭的桩蓉，它更多一切從瀏覽器出發(fā)，在不考慮ie的兼容性的情況下劳闹，已經(jīng)達(dá)到了可用的情況院究。它的使用方式很簡(jiǎn)單，直接在頁面中寫入自定義的標(biāo)簽即可本涕，例如 <my-element />业汰，但是 native web component 的開發(fā)語法確實(shí)讓開發(fā)者難以適應(yīng)。
svelte 和 web component 的概念一拍即合菩颖。由于 native web component 現(xiàn)在還不成熟样漆，用它去實(shí)現(xiàn)一些頁面的難度（學(xué)習(xí)成本和心智負(fù)擔(dān)）會(huì)較大，不太適合新手學(xué)習(xí)晦闰。你可能會(huì)問使用像lit-element這樣的框架寫 web component 是否合適氛濒？《A Comparison Of Web Component Solutions》、《All the Ways to Make a Web Component》這兩篇文章很好地對(duì)比了第三方框架 svelte鹅髓、stencil舞竿、lit-element、Lightning Web Components 的各個(gè)優(yōu)缺點(diǎn)窿冯，證明了svelte在體整體體積和它的易用性有著獨(dú)特的優(yōu)勢(shì)骗奖。《Custom Elements Everywhere》一文橫向?qū)Ρ攘?8款框架轉(zhuǎn) web component醒串，svelte的支持度非常好执桌。
什么是 svelteup
svelteup 是一個(gè)開源項(xiàng)目，歡迎持續(xù)關(guān)注芜赌，并為點(diǎn)star仰挣。
svelteup 的誕生，目標(biāo)更多是為了滿足獨(dú)立的小工具頁面和已有頁面的插入小組件缠沈。這些頁面就非常適合用svelte進(jìn)行實(shí)現(xiàn)膘壶，正是因?yàn)樗靶∵\(yùn)行時(shí)”的特點(diǎn)，很貼近瀏覽器洲愤，用最原生最底層的方式去實(shí)現(xiàn)網(wǎng)頁的組件庫颓芭。
svelteup是由三個(gè)概念混合而成，svelte是前端框架柬赐，esbuild是編譯工具亡问，web component是輸出產(chǎn)物。在瀏覽器中使用就是以web component的方式肛宋。它的優(yōu)勢(shì)就是“快州藕，輕量束世，直接，好用床玻、客戶端渲染”毁涉。
svelteup = svelte + esbuild + web component
svelteup = client rendering + light weight + extremely fast
svelteup的使用非常簡(jiǎn)單，初始約定了 component 文件夾作為組件代碼的位置笨枯，而 public 文件夾則是托管靜態(tài)資源的目錄薪丁。這些都可以通過cli遇西、配置文件或者js api進(jìn)行配置馅精，詳情參考文檔。借助于svelteup可以實(shí)現(xiàn)組件打包和頁面開發(fā)調(diào)試等工作粱檀。
# 組件打包
svelteup
# 頁面開發(fā)調(diào)試
svelteup -s public
什么樣的項(xiàng)目需要svelteup
我承認(rèn)svelteup并不完美洲敢，沒有一個(gè)工具是完美，沒有一個(gè)工具能夠覆蓋所有項(xiàng)目茄蚯。它更適合：
- “客戶端渲染頁面”
- “對(duì)包體積要求極高的小工具”
- “插入已有頁面的組件”
svelte打包產(chǎn)物極小压彭，所以性能和react、vue比就是天然優(yōu)勢(shì)渗常。如果你想用它去寫個(gè)簡(jiǎn)單頁面壮不，svelteup-starter是一個(gè)最簡(jiǎn)單的初始化模版，值得你去嘗試皱碘。
svelteup的最佳實(shí)踐
實(shí)踐一：基于 reveal.js 的 keynote-svelte 模版
reveal.js 是一款完成度很高询一、歷史悠久的在線ppt庫，著名的slides網(wǎng)站就是基于它癌椿。它能夠讓你的分享有很好的傳播力健蕊。我一直使用它的 markdown 擴(kuò)展工具 "webpro/reveal-md" 來寫一些技術(shù)分享。其使用很簡(jiǎn)單踢俄，只需要以markdown的形式來寫ppt的內(nèi)容缩功，利用reveal-md運(yùn)行和打包即可，“brandonxiang的分享” 值得參考一下都办。
它可以實(shí)現(xiàn) markdown 和 html 混寫嫡锌，有較高的靈活度。但是琳钉，如果html要考慮復(fù)用世舰，你只能復(fù)制粘貼，怎么能夠?qū)tml組件插入到已有的ppt頁面槽卫？很直接的一個(gè)想法就是利用svelteup來實(shí)現(xiàn)插入式的組件跟压。
舉個(gè)例子，如果你想幾個(gè)頁面能夠顯示一個(gè)同樣的標(biāo)簽歼培。你可以用svelte的語法簡(jiǎn)單寫一個(gè)組件震蒋，打包一個(gè)web component茸塞。你可以在 markdown 中直接使用<name-corner></name-corner>。這里注意 svelte:options 的語法可以定義web component的名字查剖。這里沒有使用黑魔法钾虐，只是用天然的瀏覽器特性給你的ppt如虎添翼。
<svelte:options tag="name-corner" />
<div class="box">
<slot>
<em>Created by Brandonxiang</em>
</slot>
</div>
<style>
.box {
width: 300px;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 1em;
margin: 0 0 1em 0;
}
</style>
keynote-svelte 就是這個(gè)基于svelteup和reveal-md的在線ppt初始化模版笋庄，歡迎嘗鮮效扫。
實(shí)踐二：chrome-extension-svelte
chrome的插件已經(jīng)是非常成熟的工具載體，聰明的開發(fā)者可以利用它開發(fā)提高效率的工具直砂。它的實(shí)現(xiàn)是通過html的頁面渲染和插件線程之間的通訊菌仁。在開發(fā)的過程當(dāng)中，不可避免的是組件化静暂。chrome插件和SSR無關(guān)济丘，但是和 svelteup 則是相輔相成。chrome-extension-svelte 就是基于svelteup的chrome插件的初始化開發(fā)模版洽蛀。借助svelte的輕量摹迷，該模版可以大大提高你的開發(fā)效率和插件顯示效率。
實(shí)踐三：版本切換小工具
在業(yè)務(wù)需求迭代的過程中郊供，我們會(huì)考慮按需求分支來虛擬環(huán)境峡碉。而Version-Tool是一個(gè)虛擬多環(huán)境的版本切換小工具，它的主要工作只是為了給頁面設(shè)置cookie帶上版本參數(shù)驮审。它的第一個(gè)版本是采用 react + ant desgin + axios + webpack 這樣的技術(shù)棧鲫寄，在沒有g(shù)zip的情況下，結(jié)果打包體積在2.1M左右头岔，體積太大到了不能接受的地步塔拳。
該工具采用svelteup工具進(jìn)行重構(gòu)，通過自定義組件替換ant design峡竣，利用fetch來替換axios靠抑。既能夠保證功能的統(tǒng)一和組件的拓展性，也能夠有效減少產(chǎn)物體積适掰。在沒有g(shù)zip的情況下颂碧，體積有效減少到13kb，是以前的165分之一类浪，小了超過一百倍载城。這時(shí)候你可以看到svelte的應(yīng)用價(jià)值。
總結(jié)
以上三個(gè)實(shí)踐费就，從易用性诉瓦、產(chǎn)物體積和拓展性等方面，展示了svelteup的用途和定位。在現(xiàn)代前端發(fā)展的過程當(dāng)中睬澡，我們的目標(biāo)是為了把頁面做得更貼近瀏覽器固额，更貼近高性能。svelte的體積小和web原生組件不謀而合煞聪，希望這個(gè)工具可以打造很多原生組件在其他項(xiàng)目中直接使用斗躏。
