基於 Svelte 的通用靜態網站開發模板

cnguu發表於2021-10-02
網站

什麼是 Svelte

Svelte 是一個資料驅動框架，語法傳承自 Ractive，所以和 Vue 語法非常相似，學習成本低，畢竟作者 Rich Harris（前端界的輪子一哥），也是 Ractive, Rollup 和 Buble 的作者

Svelte 的優點

  • 靜態編譯，無需引入框架自身，只會打包使用到的程式碼
  • 編寫更少程式碼，適合簡單的頁面，開箱即用
  • 無需虛擬 DOM 也可進行響應式資料驅動，便捷的響應式繫結

綜上優點，Svelte 適合來寫簡單的頁面，例如：官網、H5 活動頁等等

Slim

Slim，基於 Svelte 的通用靜態網站開發模板，當前模式是 SSG 渲染，後面有需求我可能會補充 SSR 渲染

內容

  • less：css 前處理器
  • autoprefixer：自動補全 css 瀏覽器相容字首
  • postcss-pxtorem：rem 佈局，自動 px 單位轉 rem
  • eslint+preitter+stylelint：保證程式碼規範和美觀
  • 簡單寫了兩個業務元件示例
    • message：訊息提示框
    • modal：模態框

為什麼沒有 typescript？在這種幾乎不會有後續維護的需求場景下，使用 typescript 帶來的弊端要高於優點

使用

  • 安裝依賴：$ yarn
  • 啟動本地開發：$ yarn dev
  • 編譯打包：$ yarn build
  • 預覽打包：$ yarn preview

專案中的打包使用了 CDN，按需求自己修改

替代 jQuery

我一直在尋找一個可以替代 jQuery 做簡單開發的工具，直到我遇到了 Svelte，資料響應可以使開發更專注於業務，而不像 jQuery 那樣需要額外關注 DOM 的變化，很大程度上降低了我的開發心智負擔，提高開發效率

通過實際的商業專案來對比，更有說服力：

基於 Svelte 的通用靜態網站開發模板

基於 Svelte 的通用靜態網站開發模板

為什麼不用 Vue 替代 jQuery ？因為業務需求，像 H5 活動頁這種，滿足快速開發的需求後，還需要非常小的打包體積，同時還要有更好的效能，綜合對比下，Svelte 比 Vue 更加適合這種業務場景

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章