JS使用技巧2——momentjs太重了嗎?試試dayjs和miment吧

關於時間的操作,一直在使用momentjs這個庫。方便靈巧,功能強大。唯一的缺點是,對於前端HTML來講,它的包太太太太太大了。

我是momentjs的重度用戶,但它的大小時刻都在折磨人。雖然方便高效,可這動輒200K的大小,對於首頁加載速度來講簡直就是一場災難。所以,開源社區有了一些精簡的方案。如dayjsmiment

dayjs

圖片描述

dayjs本身就是對標momentjs進行開發的,看作者的官方介紹:

Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.

它的用法非常簡單。

dayjs().startOf('month').add(1, 'day').set('year', 2018).format('YYYY-MM-DD HH:mm:ss');

是不是很momentjs很相似?不,其實它們就是一模一樣的。dayjs的API和moment幾乎一模一樣,所以如果想要替換到現有的momentjs代碼,直接替換爲dayjs即可,調用語句絕大部分情況下可以一字不改。

dayjs的大小有多少呢?2KB。再想想momentjs的大小。

miment

miment同樣也是一個極簡的時間處理庫,壓縮後的代碼甚至達到了1KB左右,比dayjs還小。

與包大小相應的,作者團隊只保留了momentjs中核心方法,但其實這些方法在普通場景下已經足夠。

miment的使用方法,也和momentjs基本一致。例如:

miment().add(1, 'YYYY').add(2, 'MM').add(-3, 'DD') // 增加 1 年 2 個月又減回 3 天

miment().isBetween('2000-01-01','2020-01-01') // true

miment().isBefore('2000-01-01') // false

miment().format('YYYY年MM月DD日 星期ww') // 2018年04月09日 星期1 *週日對應星期0*

想要取得單獨的年月日,更簡單

miment().format('YYYY') // 2018
miment().format('MM') // 04
miment().format('DD') // 09
miment().format('hh') // 23
miment().format('mm') // 57
miment().format('ss') // 16
miment().format('SSS') // 063
miment().format('ww') // 1
miment().format('WW') // 一

結語

對於momentjs,大部分開發者都是又愛又恨,又或者大覺不愛。其實對於絕大部分的時間操作場景,dayjs和miment更符合使用要求。尤其對於非SSR的場合,想想那精簡近200KB的首屏渲染速度,真的是非常有吸引力。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章