Vant 1.0 正式釋出:輕量、可靠的移動端 Vue 元件庫

有贊技術發表於2018-03-21

Vant 是有贊前端團隊維護的移動端 Vue 元件庫,提供了一整套 UI 基礎元件和業務元件。通過 Vant 可以快速搭建出風格統一的頁面,提升開發效率。

一、關於 Vant 1.0

距離 Vant 首次釋出剛好過去了半年時間,在這半年時間裡 Vant 團隊廣泛吸納社群的反饋和建議,持續對元件進行打磨、優化,使得 Vant 逐漸成長為一個輕量、可靠的移動端 Vue 元件庫。

在這個時間點上我們決定釋出 Vant 的 1.0 正式版,希望未來有更多小夥伴能夠參與到 Vant 的開發和使用中來。

GitHub 地址:github.com/youzan/vant


二、現有元件

Vant 1.0 正式釋出:輕量、可靠的移動端 Vue 元件庫


三、開發理念

輕量化

作為移動端元件庫,Vant 一直將輕量化作為核心開發理念。為了平衡日益豐富的功能和輕量化之間的矛盾關係,我們嘗試了很多的優化方式,包括支援元件按需載入、公共模組複用、元件編譯流程優化等。

在應用一系列的優化手段之後,目前 Vant 的元件平均體積僅有 8.8KB,Uglify + Gzip 後約 1KB。作為對比,mint-ui 的元件平均體積為 15.2KB,某些元件庫的元件平均體積甚至在 25KB 以上。

Vant 之所以能保持如此小的元件體積,主要歸功於我們獨特的元件編譯方式。目前主流的元件編譯方式是通過 webpack 搭配 vue-loader 對每個元件進行編譯,為每個元件生成一個打包後 JS 檔案。這樣的做法會產生大量的冗餘程式碼,比如 webpack 內建的模組化程式碼、vue-loader 內建的 normalize 函式、重複引入的 babel helper 等等,而我們不希望在元件的編譯結果中引入這些冗餘程式碼。

一開始我們嘗試通過使用 rollup 和 rollup-plugin-vue 去解決上述的問題,但很快我們就發現了更為直接的方式,即通過官方提供的 vue-template-compiler 和 babel 對元件進行編譯,這樣的方式簡單純粹,編譯出的程式碼非常乾淨,細節在此不做贅述,有興趣的同學可以看下 Vant 中構建部分的原始碼

快速迭代

另外一個很重要的理念是快速迭代。有贊前端團隊幾十個工程師每天都在用的就是現在你看到的 GitHub 上這個版本,我們並沒有一個所謂的“內部版”。同時,出於對自己名譽的珍視,我們不是簡單地把它開源了事,而是把它當做一款技術產品去維護,不單單自己用的爽,也要讓別人好用,因此我們會保持對社群需求的快速響應、對 bug 及時跟進並修復。

迄今為止專案 commit 總數超過 1600 次,解決 issue 300 個,合併 Pull Request 400 個,釋出 90 次,基本上保持了一週 1 ~ 2 次的釋出節奏。這裡麵包含了很多社群開發者的付出,感謝他們對 Vant 作出的貢獻~ 在未來我們也會繼續保持這樣的開發節奏,為社群輸出更好的開源產品。

生態化

除了提供元件以外,我們也在為豐富 Vant 的開發生態做很多嘗試,希望能覆蓋各個場景下的開發需求,為大家提供便利。下面是我們現有的一些生態或能力:

  • 基於 vue-cli 的腳手架 vue-cli-template-vant
  • 支援 nuxt 伺服器端渲染
  • 支援 Typescript 型別檢測
  • 支援 i18n 多語言定製
  • 支援通過 postcss 外掛進行主題定製
  • 官方 Demo 倉庫 - vant-demo
  • 基於相同視覺規範的小程式元件庫 - zanui-weapp
  • 開源社群的移動商城示例專案 - vant--mobile-mall

在生態化方面我們還有很多需要補齊的方面,比如提供對 rem 的支援、vscode 程式碼提示外掛等,這些將會是我們 18 年嘗試的方向。


四、最後

開源專案的進步離不開社群的貢獻,非常感謝過去對 Vant 提出 PR 和意見的所有人,尤其感謝社群 @chuangbo@qianzhaoyan@GeoffZhu 等同學的付出。希望未來能有更多的同學加入到 Vant 的開發中來。如果你對有讚的前端團隊感興趣,也歡迎加入我們一起玩耍~

Vant 1.0 正式釋出:輕量、可靠的移動端 Vue 元件庫

相關文章