乐趣区

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

关于时间的操作,一直在使用 momentjs 这个库。方便灵巧,功能强大。唯一的缺点是,对于前端 HTML 来讲,它的包太太太太太大了。
我是 momentjs 的重度用户,但它的大小时刻都在折磨人。虽然方便高效,可这动辄 200K 的大小,对于首页加载速度来讲简直就是一场灾难。所以,开源社区有了一些精简的方案。如 dayjs 和 miment。
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 的首屏渲染速度,真的是非常有吸引力。

退出移动版