你可能不需要Moment.js

我会带着你远行 2021-07-04 15:54 482阅读 0赞

`Moment.js`是一个很棒的时间和日期库，具有许多牛X的方法，平时`npm install`了之后就是干，但是如果您的Web应用程序对性能上有很高的要求，可能会由于其复杂的`API`和大小会导致巨大的性能上的比不要的开销。  
![在这里插入图片描述][20190921161551752.png]

## `Moment`存在的一些问题 ##

*  它高度基于OOP API，这使得它无法使用`Webpack 2` 新引入的`Tree-shaking`代码优化技术
 *  由于OOP API还有非纯函数，这会导致一些bug github.com/moment/mome…
 *  如果您没有使用时区，而只使用了`moment.js`中的一些简单函数，这会导致你的应用程序被引入了很多没使用的方法，这是极其浪费性能和内存的。在这里推荐使用`dayjs`,  
    `dayjs`有一个较小的核心，并且具有非常相似的API，因此很容易从`moment`平滑过渡到`day.js`。`date-fns`可以使用`Tree-shaking`代码优化技术和其他`good api`，因此它很适合与`React`，`Sinon.js`和`webpack`等好基友一起使用。

## 简单比较 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">名字</th> 
   <th align="left">大小(gzip)</th> 
   <th align="left">支持Tree-shaking</th> 
   <th align="left">名气</th> 
   <th align="left">api方法数</th> 
   <th align="left">模式</th> 
   <th align="left">时区支持</th> 
   <th align="left">支持的语言数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Moment.js</td> 
   <td align="left">329K(69.6K)</td> 
   <td align="left">No</td> 
   <td align="left">38k</td> 
   <td align="left">高</td> 
   <td align="left">OO</td> 
   <td align="left">非常好(moment-timezone)</td> 
   <td align="left">123</td> 
  </tr> 
  <tr> 
   <td align="left">date-fns</td> 
   <td align="left">78.4k(13.4k) without tree-shaking</td> 
   <td align="left">Yes</td> 
   <td align="left">13k</td> 
   <td align="left">高</td> 
   <td align="left">Functional</td> 
   <td align="left">还不支持</td> 
   <td align="left">32</td> 
  </tr> 
  <tr> 
   <td align="left">dayjs</td> 
   <td align="left">6.5k(2.6k) without plugins</td> 
   <td align="left">No</td> 
   <td align="left">14k</td> 
   <td align="left">中</td> 
   <td align="left">OO</td> 
   <td align="left">还不支持</td> 
   <td align="left">23</td> 
  </tr> 
 </tbody> 
</table>

## 程序员吐槽 ##

*  把了`moment.js`换成了`date-fns` \- 构建输出减少了40％  
    —Jared Farago from webnode project.
 *  请使用`JavaScript`原生时间对象和数组。 如果您因为某种原因想要用`Moment.js`，那么这是一个很好的库。 差不多。  
    —Dan Abramov, Author of Redux and co-author of Create React App.  
    Building tools for humans.
 *  我强烈建议在`Moment.js`上使用`date-fns`，它有一个更好的API，你只能包含你需要的部分！  
    —Matija Marohni?, a design-savvy frontend developer from Croatia.
 *  就在昨天，在项目中将`momentjs`换了，我们项目体积减少了很多??  
    —Sergey Petushkov, a javaScript developer from Moscow, Russia ? Currently in Berlin, Germany.

## `ESLint`插件 ##

如果你正在使用 `ESLint`, 你可以安装一个插件`plugin` 来帮助你识别代码库中你没有（可能不需要）`Moment.js`的地方。  
安装这个插件…

npm install --save-dev eslint-plugin-you-dont-need-momentjs

…然后更新你的配置

"extends" : ["plugin:you-dont-need-momentjs/recommended"],

## 使用对比 ##

注意提供的`date-fns`示例适用于[v2][]

[请参阅v1 docs][v1 docs]

## 解析 ##

### 字符串+日期格式化 ###

返回从字符串中解析的日期.

// Moment.js
    moment('12-25-1995', 'MM-DD-YYYY');
    // => "1995-12-24T13:00:00.000Z"
    
    // date-fns
    import parse from 'date-fns/parse';
    parse('12-25-1995', 'MM-dd-yyyy', new Date());
    // => "1995-12-24T13:00:00.000Z"
    
    // dayjs
    dayjs('12-25-1995');
    // => "1995-12-24T13:00:00.000Z"

### 字符串+时间格式化 ###

返回从字符串中解析的时间日期.

// Moment.js
    moment('2010-10-20 4:30', 'YYYY-MM-DD HH:mm');
    // => "2010-10-19T17:30:00.000Z"
    
    // date-fns
    import parse from 'date-fns/parse';
    parse('2010-10-20 4:30', 'yyyy-MM-dd H:mm', new Date());
    // => "2010-10-19T17:30:00.000Z"
    
    // dayjs?不支持自定义格式解析

### 字符串+本地格式化 ###

返回从字符串中解析的本地化时间日期.

// Moment.js
    moment('2012 mars', 'YYYY MMM', 'fr');
    // => "2012-02-29T13:00:00.000Z"
    
    // date-fns
    import parse from 'date-fns/parse';
    import fr from 'date-fns/locale/fr';
    parse('2012 mars', 'yyyy MMMM', new Date(), {  locale: fr });
    // => "2012-02-29T13:00:00.000Z"
    
    // dayjs?不支持自定义格式解析

## 取值 + 赋值 ##

### 毫秒/秒/分/时 ###

**获取 毫秒 / 秒 / 分 / 时。**

// Moment.js
    moment().seconds();
    // => 49
    moment().hours();
    // => 19
    
    // 原生
    new Date().getSeconds();
    // => 49
    new Date().getHours();
    // => 19
    
    // date-fns
    import getSeconds from 'date-fns/getSeconds';
    import getHours from 'date-fns/getHours';
    getSeconds(new Date());
    // => 49
    getHours(new Date());
    // => 19
    
    // dayjs
    dayjs().second();
    // => 49
    dayjs().hour();
    // => 19

**设置 毫秒 / 秒 / 分 / 时。**

// Moment.js
    moment().seconds(30);
    // => "2018-09-09T09:12:30.695Z"
    moment().hours(13);
    // => "2018-09-09T03:12:49.695Z"
    
    // 原生
    new Date(new Date().setSeconds(30));
    // => "2018-09-09T09:12:30.695Z"
    new Date(new Date().setHours(13));
    // => "2018-09-09T03:12:49.695Z"
    
    // date-fns
    import setSeconds from 'date-fns/setSeconds';
    import setHours from 'date-fns/setHours';
    setSeconds(new Date(), 30);
    // => "2018-09-09T09:12:30.695Z"
    setHours(new Date(), 13);
    // => "2018-09-09T03:12:49.695Z"
    
    // dayjs
    dayjs().set('second', 30);
    // => "2018-09-09T09:12:30.695Z"
    dayjs().set('hour', 13);
    // => "2018-09-09T03:12:49.695Z"

### 月份日期 ###

设置&获取月份。

// Moment.js
    moment().date();
    // => 9
    moment().date(4);
    // => "2018-09-04T09:12:49.695Z"
    
    // 原生
    new Date().getDate();
    // => 9
    new Date().setDate(4);
    // => "2018-09-04T09:12:49.695Z"
    
    // date-fns
    import getDate from 'date-fns/getDate';
    import setDate from 'date-fns/setDate';
    getDate(new Date());
    // => 9
    setDate(new Date(), 4);
    // => "2018-09-04T09:12:49.695Z"
    
    // dayjs
    dayjs().date();
    // => 9
    dayjs().set('date', 4);
    // => "2018-09-04T09:12:49.6

### 星期几 ###

设置&获取星期。

// Moment.js
    moment().day();
    // => 0 (Sunday)
    moment().day(-14);
    // => "2018-08-26T09:12:49.695Z"
    
    // 原生
    new Date().getDay();
    // => 0 (Sunday)
    new Date().setDate(new Date().getDate() - 14);
    // => "2018-08-26T09:12:49.695Z"
    
    // date-fns
    import getDay from 'date-fns/getDay';
    import setDay from 'date-fns/setDay';
    getDay(new Date());
    // => 0 (Sunday)
    setDay(new Date(), -14);
    // => "2018-08-26T09:12:49.695Z"
    
    // dayjs
    dayjs().day();
    // => 0 (Sunday)
    dayjs().set('day', -14);
    // => "2018-08-26T09:12:49.695Z"

### 一年的某一天 ###

设置&获取一年的某一天。

// Moment.js
    moment().dayOfYear();
    // => 252
    moment().dayOfYear(256);
    // => "2018-09-13T09:12:49.695Z"
    
    // date-fns
    import getDayOfYear from 'date-fns/getDayOfYear';
    import setDayOfYear from 'date-fns/setDayOfYear';
    getDayOfYear(new Date());
    // => 252
    setDayOfYear(new Date(), 256);
    // => "2018-09-13T09:12:49.695Z"
    
    // dayjs ? 不支持

### 一年的某一周 ###

设置&获取一年的某一周。

// Moment.js
    moment().week();
    // => 37
    moment().week(24);
    // => "2018-06-10T09:12:49.695Z"
    
    // date-fns
    import getWeek from 'date-fns/getWeek';
    import setWeek from 'date-fns/setWeek';
    getWeek(new Date());
    // => 37
    setWeek(new Date(), 24);
    // => "2018-06-10T09:12:49.695Z"
    
    // dayjs ?? requires weekOfYear plugin
    import weekOfYear from 'dayjs/plugin/weekOfYear';
    dayjs.extend(weekOfYear);
    dayjs().week();
    // => 37
    // dayjs ? 不支持

### 某月有多少天 ###

获取某月有多少天。

// Moment.js
    moment('2012-02', 'YYYY-MM').daysInMonth();
    // => 29
    
    // date-fns
    import getDaysInMonth from 'date-fns/getDaysInMonth';
    getDaysInMonth(new Date(2012, 1));
    // => 29
    
    // dayjs
    dayjs('2012-02').daysInMonth();
    // => 29

### 一年有多少周 ###

根据ISO周，获取当年的周数。

// Moment.js
    moment().isoWeeksInYear();
    // => 52
    
    // date-fns
    import getISOWeeksInYear from 'date-fns/getISOWeeksInYear';
    getISOWeeksInYear(new Date());
    // => 52
    
    // dayjs ? does not support weeks in the year

### 获取日期最大值 ###

返回给定日期的最大值。

const array = [
      new Date(2017, 4, 13),
      new Date(2018, 2, 12),
      new Date(2016, 0, 10),
      new Date(2016, 0, 9),
    ];
    // Moment.js
    moment.max(array.map(a => moment(a)));
    // => "2018-03-11T13:00:00.000Z"
    
    // 原生
    new Date(Math.max.apply(null, array)).toISOString();
    // => "2018-03-11T13:00:00.000Z"
    
    // date-fns
    import max from 'date-fns/max';
    max(array);
    // => "2018-03-11T13:00:00.000Z"
    
    // dayjs ? 不支持

### 获取日期最小值 ###

返回给定日期的最小值。

const array = [
      new Date(2017, 4, 13),
      new Date(2018, 2, 12),
      new Date(2016, 0, 10),
      new Date(2016, 0, 9),
    ];
    // Moment.js
    moment.min(array.map(a => moment(a)));
    // => "2016-01-08T13:00:00.000Z"
    
    // 原生
    new Date(Math.min.apply(null, array)).toISOString();
    // => "2016-01-08T13:00:00.000Z"
    
    // date-fns
    import min from 'date-fns/min';
    min(array);
    // => "2016-01-08T13:00:00.000Z"
    
    // dayjs ? 不支持

## 操作比较 ##

### 添加天数 ###

将指定的天数添加到给定日期。

// Moment.js
    moment().add(7, 'days');
    // => "2018-09-16T09:12:49.695Z"
    
    // date-fns
    import addDays from 'date-fns/addDays';
    addDays(new Date(), 7);
    // => "2018-09-16T09:12:49.695Z"
    
    // dayjs
    dayjs().add(7, 'day');
    // => "2018-09-16T09:12:49.695Z"

### 减去天数 ###

从给定日期减去指定的天数。

// Moment.js
    moment().subtract(7, 'days');
    // => "2018-09-02T09:12:49.695Z"
    
    // date-fns
    import subDays from 'date-fns/subDays';
    subDays(new Date(), 7);
    // => "2018-09-02T09:12:49.695Z"
    
    // dayjs
    dayjs().subtract(7, 'day');
    // => "2018-09-02T09:12:49.695Z"

### 获月初时间 ###

获取这个月初时间。

// Moment.js
    moment().startOf('month');
    // => "2018-08-31T14:00:00.000Z"
    
    // date-fns
    import startOfMonth from 'date-fns/startOfMonth';
    startOfMonth(new Date());
    // => "2018-08-31T14:00:00.000Z"
    
    // dayjs
    dayjs().startOf('month');
    // => "2018-08-31T14:00:00.000Z"

### 获取今天结束的时间 ###

获取今天结束的时间。

// Moment.js
    moment().endOf('day');
    // => "2018-09-09T13:59:59.999Z"
    
    // date-fns
    import endOfDay from 'date-fns/endOfDay';
    endOfDay(new Date());
    // => "2018-09-09T13:59:59.999Z"
    
    // dayjs
    dayjs().endOf('day');
    // => "2018-09-09T13:59:59.999Z"

## 显示 ##

### 格式化 ###

用给定的格式格式化给定的字符串。

// Moment.js
    moment().format('dddd, MMMM Do YYYY, h:mm:ss A');
    // => "Sunday, September 9th 2018, 7:12:49 PM"
    moment().format('ddd, hA');
    // => "Sun, 7PM"
    
    // date-fns
    import format from 'date-fns/format';
    format(new Date(), 'eeee, MMMM do YYYY, h:mm:ss aa');
    // => "Sunday, September 9th 2018, 7:12:49 PM"
    format(new Date(), 'eee, ha');
    // => "Sun, 7PM"
    
    // dayjs
    dayjs().format('dddd, MMMM D YYYY, h:mm:ss A');
    // => "Sunday, September 9 2018, 7:12:49 PM" ?? not support 9th
    dayjs().format('ddd, hA');
    // => "Sun, 7PM"

### 获取到现在的年限 ###

获取到现在的年限

// Moment.js
    moment(1536484369695).fromNow();
    // => "4 days ago"
    
    // date-fns
    import formatDistance from 'date-fns/formatDistance';
    formatDistance(new Date(1536484369695), new Date(), {  addSuffix: true });
    // => "4 days ago"
    
    // dayjs ?? requires relativeTime plugin
    import relativeTime from 'dayjs/plugin/relativeTime';
    dayjs.extend(relativeTime);
    
    dayjs(1536484369695).fromNow();
    // => "5 days ago" ?? 这个插件的舍入方法与moment.js和date-fns不同，请谨慎使用。

### 时差 ###

返回两个时间点的时差。

// Moment.js
    moment([2007, 0, 27]).to(moment([2007, 0, 29]));
    // => "in 2 days"
    
    // date-fns
    import formatDistance from 'date-fns/formatDistance';
    formatDistance(new Date(2007, 0, 27), new Date(2007, 0, 29));
    // => "2 days"
    
    // dayjs ?? 需要relativeTime插件
    import relativeTime from 'dayjs/plugin/relativeTime';
    dayjs.extend(relativeTime);
    dayjs('2007-01-27').to(dayjs('2007-01-29'));
    // => "in 2 days"

### 时差（毫秒） ###

返回两个时间点的毫秒级时差。

// Moment.js
    moment([2007, 0, 27]).diff(moment([2007, 0, 29]));
    // => -172800000
    moment([2007, 0, 27]).diff(moment([2007, 0, 29]), 'days');
    // => -2
    
    // date-fns
    import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
    differenceInMilliseconds(new Date(2007, 0, 27), new Date(2007, 0, 29));
    // => -172800000
    import differenceInDays from 'date-fns/differenceInDays';
    differenceInDays(new Date(2007, 0, 27), new Date(2007, 0, 29));
    // => -2
    
    // dayjs
    dayjs('2007-01-27').diff(dayjs('2007-01-29'), 'milliseconds');
    // => -172800000
    dayjs('2007-01-27').diff(dayjs('2007-01-29'), 'days');
    // => -2

## 查询 ##

### 是否之前 ###

检查日期是否在另一个日期之前。

// Moment.js
    moment('2010-10-20').isBefore('2010-10-21');
    // => true
    
    // date-fns
    import isBefore from 'date-fns/isBefore';
    isBefore(new Date(2010, 9, 20), new Date(2010, 9, 21));
    // => true
    
    // dayjs
    dayjs('2010-10-20').isBefore('2010-10-21');
    // => true

### 是否一样 ###

检查日期是否与另一个日期相同。

// Moment.js
    moment('2010-10-20').isSame('2010-10-21');
    // => false
    moment('2010-10-20').isSame('2010-10-20');
    // => true
    moment('2010-10-20').isSame('2010-10-21', 'month');
    // => true
    
    // date-fns
    import isSameDay from 'date-fns/isSameDay';
    import isSameMonth from 'date-fns/isSameMonth';
    isSameDay(new Date(2010, 9, 20), new Date(2010, 9, 21));
    // => false
    isSameDay(new Date(2010, 9, 20), new Date(2010, 9, 20));
    // => true
    isSameMonth(new Date(2010, 9, 20), new Date(2010, 9, 21));
    // => true
    
    // dayjs
    dayjs('2010-10-20').isSame('2010-10-21');
    // => false
    dayjs('2010-10-20').isSame('2010-10-20');
    // => true
    // dayjs ? 不支持

### 是否之后 ###

检查日期是否在另一个日期之后。

// Moment.js
    moment('2010-10-20').isAfter('2010-10-19');
    // => true
    
    // date-fns
    import isAfter from 'date-fns/isAfter';
    isAfter(new Date(2010, 9, 20), new Date(2010, 9, 19));
    // => true
    
    // dayjs
    dayjs('2010-10-20').isAfter('2010-10-19');
    // => true

### 是否在两个日期之前 ###

检查日期是否在两个其他日期之间。

// Moment.js
    moment('2010-10-20').isBetween('2010-10-19', '2010-10-25');
    // => true
    
    // date-fns
    import isWithinInterval from 'date-fns/isWithinInterval';
    isWithinInterval(new Date(2010, 9, 20), { 
      start: new Date(2010, 9, 19),
      end: new Date(2010, 9, 25),
    });
    // => true
    
    // dayjs ?? requires isBetween plugin
    import isBetween from 'dayjs/plugin/isBetween';
    dayjs.extend(isBetween);
    dayjs('2010-10-20').isBetween('2010-10-19', '2010-10-25');
    // => true

### 是否是闰年 ###

判断是否是润年。

// Moment.js
    moment([2000]).isLeapYear();
    // => true
    
    // date-fns
    import isLeapYear from 'date-fns/isLeapYear';
    isLeapYear(new Date(2000, 0, 1));
    // => true
    
    // dayjs ?? 要引入 isLeapYear 插件
    import isLeapYear from 'dayjs/plugin/isLeapYear';
    dayjs.extend(isLeapYear);
    dayjs('2000').isLeapYear();
    // => true

### 是否是日期对象 ###

检查变量是否是js `Date`对象。

// Moment.js
    moment.isDate(new Date());
    // => true
    
    // date-fns
    import isDate from 'date-fns/isDate';
    isDate(new Date());
    // => true
    
    // dayjs ? 不支持

## 总结 ##

如果你只需要简单的操作那么`day.js`更适合你，如果复杂一点的项目那么`date-fns`看起来更合适。

[20190921161551752.png]: /images/20210704/a2659bd432c5474f933a942a8f0cff31.png
[v2]: https://date-fns.org/v2.2.1/docs/Getting-Started
[v1 docs]: https://date-fns.org/v1.30.1/docs/Getting-Started