創建 Svelte Web 組件
在這篇文章裏我們來研究如何製作實用的 Svelte Web 組件,然後拿 Svelte 組件和其他框架做的類似組件做一個比較。
免責聲明:這篇文章並不是要對比 Svelte 與 Angular 框架。本文主要介紹創建 Svelte Web 組件的方法,順便分享了使用 Angular 創建的類似 Web 組件。我覺得這和框架對比的主題相去甚遠,這篇文章談的不是框架之間的高低不同。
Svelte 是什麼?
Svelte 是一種構建用戶界面的全新方法。像 React 和 Vue 這樣的傳統框架會在瀏覽器中完成大部分工作,而 Svelte 則將這些工作轉移到了在構建應用時發生的編譯步驟中。
這段說明是從 Svelte.dev 網站直接引用的。可以訪問這個網站獲取更多信息。
如何創建 Svelte Web 組件?
- 設置 Svelte 項目
首先從 Svelte 提供的克隆模板開始,並設置軟件包:
- 使用 TypeScript(可選)
雖然 Svelte 還沒有對 TypeScript 提供官方支持,但也有一種方法可以用上 TypeScript。Svelte 社區提供了一些 VS Code 擴展和模板。不過目前我會繼續使用 JavaScript,同時單獨使用 TypeScript 來編寫和編譯 TS 文件,並將它們用作 JS 文件。
tsc--init 命令將創建 tsconfig.json 文件,你還需要指定一些選項。"outDir": "./src", "rootDir": "./ts", "baseUrl": "./ts",這樣你就可以將 TS 文件放在 ts 文件夾中,然後它們會被編譯並放入 src 文件夾,在 TS watcher 的輔助下保存成文件。
- 創建 Svelte 組件
App.svelte 組件位於模板的 src 文件夾中。它將被導入到創建和導出應用的 main.js 文件中。
-
首先,你需要更新 rollup.config.js:
-
然後是重命名操作:App.svelte->snake.svelte,同時更新 main.js。
-
你需要告訴 Svelte 你將把組件導出爲 Web 組件。在 svelte 組件中加入這一行代碼:
<svelte:options tag=”svelte-snake” immutable={true} />
你放在標籤中的內容都會成爲最終的 bundle.js 中實際包含的 Web 組件標籤。另請注意,我使用的是 immutable={true},因爲我的狀態是不可變的,因此 Svelte 使用參考相等性檢查來提高性能。
-
你不需要在 main.js 中實際創建組件,因爲我們將導出爲 Web 組件。你只需要導入和導出組件即可。看一下我的 main.js 示例:
-
更新 public/index.html 以使用我們的 Web 組件,讓它在開發過程中正確顯示在瀏覽器中。
<body><svelte-snake></svelte-snake></body>
現在你已經準備好開發 snake.svelte 組件了,然後我們會將其導出爲 Web 組件。
- 構建和部署
執行 npm run build 命令,然後 bundle.js 文件將在 public/build 文件夾中創建出來。它包含了我們完整的 Web 組件,帶有樣式和其他一些必要的 Svelte 代碼。
我將 Web 組件發佈到了 GitHub Pages 上。你也可以這樣做,具體可參考 GitHub Pages 入門教程,它還會提供 gzip 壓縮後的 bundle.js 文件,所以我就不用自己打包了。
-
在項目的根文件夾中創建 docs 文件夾;
-
複製 docs 文件夾中的 bundle.js;
-
創建 index.html 文件並將其放在 docs 文件夾中。它需要一些合適的基本 href 和腳本導入。參考我的例子:
-
最後,你可以使用:
<body><svelte-snake></svelte-snake></body>
- 你可以告訴 GitHub 從你項目的 docs 文件夾中提供靜態文件。轉到 GitHub Repository Settings->Options->GitHub Pages->Source->master branch/docs folder。
- 打包大小
這個項目的 src 文件夾包含多個 JS 文件和一個 Svelte 組件。
我們看一下它們的大小:
-
input.js,main.js,map.js,models.js,snake.js,store.js:〜10.7KB/〜2.6KB(gzip 壓縮後)
-
snake.svelte:〜3.5KB/〜1.2KB(gzip 壓縮後)
在 npm run build 之後,Svelte 將所有源文件編譯到一個 bundle.js 文件中,該文件包含讓 Web 組件正常工作所需要的所有 Svelte 函數。在 Svelte 中沒有運行時,有一些函數可以讓模板根據更改來進行對應的更新,並且所有響應代碼都可以正常工作。這些代碼是在編譯時生成的。我沒有使用的內容全都不會出現在 bundle.js 中。此外,bundle.js 也已經過壓縮與合併處理。
- bundle.js:〜13.7KB/〜5.4KB(gzip 壓縮後)
- 自己試用一下 Svelte Web 組件
bundle.js 包含讓 svelte-snake Web 組件正常工作所需的所有代碼。你可以在本地創建示例 index.html,在瀏覽器中打開它,然後查看成品的效果和包的大小。例如,使用以下 index.html:
樣本 index.html
- 對比 Angular Snake Web 組件
在我的另一篇文章中,我使用 Angular 9 創建了完全相同的 Web 組件。Angular 的最終打包體積明顯要大一些:〜51KB(gzip 壓縮後),而 Svelte 是〜5.4KB(gzip 壓縮後),但這並不是說 Angular 或 Svelte 在創建 Web 組件方面有更好的表現。
-
Angular 帶有運行時,並且由於 RxJS 的緣故,組件包也會更大一些。Angular 是一個完整的框架,所以即便它在產品構建過程中有一個很好的搖樹流程,它的成本還是客觀存在的。但如果要構建的應用程序並不打算儘可能縮減體積的話,這部分成本就可以忽略不計了。Angular 具有非常完善的生態系統,因此它的足跡更大也可以理解。在我看來,Angular Web 組件有自己的價值和用武之地。
-
Svelte 的足跡會小一些,因爲它沒有運行時。Svelte 設法在編譯時確定組件正常工作所需的條件。然後它會注入特定的 Svelte 函數以支持模板、綁定和響應式代碼運行。這裏沒有單獨的運行時來通過更改更新模板。你編寫好響應式代碼,然後 Svelte 將其轉換成命令式的對等代碼以提高性能。
聲明:
本文於網絡整理,版權歸原作者所有,如來源信息有誤或侵犯權益,請聯繫我們刪除或授權事宜。
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/zvSYxqxO5LeJmBCakxza0Q