一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。
MomentJs是非常流行的JavaScript日期库，之前做的项目，要在前端进行大量的日期计算，刚开始使用的时候，踩了不少坑。最近尝试了新的日期库：Date-fns，还挺好使。
Moment.js是一个很棒的时间日期库，提供了许多出色的功能。如：日期时间格式化，验证处理不同时区等功能。但是对于web应用程序来说，MomentJS太过于复杂，包太大了。
MomentJS缺点
在我早期使用时，发现这样一个问题。当修改endDate时，startDate也会随之变化。
const startDate = moment();
const endDate = startDate.add(1, 'year');
console.log(startDate); // 2023-03-13T13:39:07+01:00
console.log(endDate); // 2023-03-13T13:39:07+01:00
Moment最大的缺点就是包过于大，大约300k。在一些对于性能要求较大项目中，可能会出现性能问题。
接下来，一起看看Date-fns。
Date-fus
github地址：github.com/date-fns/da…
文档地址：date-fns.org/docs/Gettin…
安装：
npm install date-fns --save
#或者使用 yarn
yarn add date-fns
使用：
import { formatDistance, subDays } from 'date-fns'
formatDistance(subDays(new Date(), 3), new Date(), { addSuffix: true })
//=> "3 days ago"
Date-fns特点
1.支持单个导入
Date-fns 库包含多个函数，有200多种功能，适用于几乎所有场合。并且是模块化的，可以根据需要单独导入这些函数。适用于 webpack、Browserify 或 Rollup，还支持 tree-shaking。
例如，如果要计算2个日期之间的差值，只需要导入formatDistance和subDays函数。
import { formatDistance, subDays } from ‘date-fns’
formatDistance(subDays(new Date(), 3), new Date())
2.Date-fns是不可变的
上面提到，可变性是使用 momentJs 时最大的问题之一。在date-fns 完全消除了这个问题，它支持不变性。
案例如下：
const startDate = new Date();
const endDate = add(startDate, {years: 2});
console.log(startDate) // 2022-03-13T13:39:07+01:00
console.log(endDate) // 2024-03-13T13:39:07+01:00
3.代码包更小
Date-fns的包大小约为80kb，不到MomentJS的三分之一，并且同时支持 Flow 和 TypeScript。
