源碼github地址在此，記得點星：brandonxiang/svelte-webpack-mpa
背景
svelte是來自rollup的作者Rich Harris，它主打的就是輕量和高效開發效率。如今開發的項目除了后臺系統外，其他前端項目基本都是基于移動端頁面，資訊頁面，博客為主。一個輕量級的框架能解決非常多的問題。
一項調查統計了現實世界中 Web 應用使用多種 Web 框架構建的相關數據。統計顯示，使用一些流行框架的應用經過 gzip 壓縮后的大小（KB）分別為：
Angular + ngrx：134
React + Redux：193
Vue：41.8
Svelte：9.7
前端框架給我們提供什么
在做了那么多的前端項目之后，前端框架到底帶給我們什么樣的開發體驗。毫無疑問的是效率的提高，但是如果要考慮到極致的用戶體驗，極小的項目構建體積是每一個前端項目必須考慮的一個問題，尤其是移動端的項目。減少20kb js大小，給用戶帶來的用戶體驗優化是非常大的，特別在弱網環境。svelte應該是如今最輕量級的前端框架之一。它的輕量是建立于沒有多余的運行時，沒有virtual dom的基礎上。類似vue的構思，所有的邏輯會集中于模版處理本身。
在web component還未成熟的時代下，一個標準的前端框架是非常有必要的，有助于提高我們項目的開發效率。我總結為以下兩個點：
- 數據流的處理
- 組件化以及代碼復用
然而svelte給予開發者的東西不多不少，剛好是這些內容。
virtual-dom的價值
svelte的優勢站在損失掉virtual-dom的基礎之上，但是缺少了virtual dom頁面就會慢很多嗎？還是變得更快。這樣，給予我們一個思考題。前端框架到底需不需要一個virtual dom？
Rich Harris大佬的virtual-dom-is-pure-overhead一文中，指出virtual dom并非免費的午餐，它也會帶來性能和內存上的消耗。例如一個HelloWorld的組件，要把props的值進行修改，需要三個步驟：
- 先后兩次virtual dom要記錄下來，對相同的節點進行比較
- 需要把該節點上所有的屬性進行對比，記錄下變動的內容
- 更新真實dom
svelte則是省去前面兩步，直接更新dom，它是一個compiler，對已有的組件進行預編譯，最終實現的代碼。關鍵的步驟都已經在編譯過程中完成了。
if (changed.name) {
text.data = name;
}
尤大大發推說vue3能夠比svelte更加快。具體的情況現在還無從考證。而且有時候benchmark不能說明所有的問題，因為現實的開發情況往往和benchmark不太一樣。但是有一點我是能確認的就是越貼近原生性能越好，除了后臺頁面外，其他的頁面svelte有著天然的優勢，因為它的體積小，作用純粹。
多頁面開發模版
由于svelte的輕量化的特性，我會將它和多頁面打包聯想在一起。與SPA的統一集成性不同，每個頁面往往都是獨立運作，項目中各種活動頁面，運營頁面都是如此。由于打包后的js包很小，所以ssr的效果也不再明顯。對于首屏顯示要求不高的業務場景，完全可以考慮CSR或者靜態直出即可。
brandonxiang/svelte-webpack-mpa是一個多頁面開發模版，基于以往多頁面的開發經驗。
里面自帶了svelte-preprocess，Postcss的Autoprefixer插件有助于處理瀏覽器的兼容問題，你也可以自行配置scss或者less。
使用方法
npx degit brandonxiang/svelte-webpack-mpa svelte-app
yarn
# or
npm i
開發
dev是起服務的命令。http://localhost:9000/page1.html是第一個頁面。http://localhost:9000/page2.html則是第二個頁面，build則是構建命令。
yarn dev
# or
npm run dev
配置scss
svelte的官方源碼把所有代碼預編譯都會經過preprocess，是為了讓開發者自行調整，而svelte-preprocess幫你完成了99%的工作，只需要裝上相關依賴，寫好配置即可。
module: {
rules: [
...
{
test: /\.(html|svelte)$/,
exclude: /node_modules/,
use: {
loader: 'svelte-loader',
options: {
preprocess: require('svelte-preprocess')({
pug({ /* pug options */ }),
scss({ /* scss options */ }),
coffeescript({ /* coffeescript options */ })
})
},
},
},
...
]
}
...
吐槽
svelte對于typescript的支持不是特別友好，因為它是以模版語言為基礎的。這一點和vue類似，如果以模版為SFC的開發形式，vue的組件屬性類型判斷并不如react友好。期待一下vue3和svelte的后續ts支持。
語法
svelte進入3.0后，語法借鑒了vue的SFC語法，非常簡單。官網上有很多栗子，這里只提及一個循環渲染的栗子，語法類似模版語言，數值的插值使用{}，大家感受一下，熟悉vue的童鞋應該很熟悉。由于框架中沒有virtual-dom，所以不需要像vue和react一樣需要dom根節點。
<script>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script>
<h1>The Famous Cats of YouTube</h1>
<ul>
{#each cats as { id, name }, i}
<li><a target="_blank" >
{i + 1}: {name}
</a></li>
{/each}
</ul>
參考資料
題外話
shopee，又稱蝦皮，是一家騰訊投資的跨境電商平臺。這里加班少，技術氛圍好。如果想和我并肩作戰一起學習，可以找我內推。郵箱weiping.xiang@shopee.com，非誠勿擾。
