Date-Fns 和 Moment.Js 哪个更好？

我们在开发过程中，往往会遇到很多需要处理日期的地方，如果我们用自带的date属性去处理日期，是一个很麻烦的事情，这个时候用一个合适的时间库就可以完美的解决这个问题了，目前比较常用的日期处理库就是Momentjs和date-fns这两个库，如下图所示，我们可以看到他们的使用量

Moment-js使用

目前Momentjs已经不再维护了，但是针对已有的api，我们仍然是可以继续使用Momentjs去处理日期，官网建议不要为新项目选择Momentjs，官方也为我们提供了一些替代方案,详见官网

上面我们说了，虽然官方给我们提供了一些其他的解决方案，但是Momentjs仍然可以使用，下面我们就一起来使用一下Moment,然后再让Moment和date-fns对比一下

安装Moment

npm install Moment
// or
yarn add Moment

在项目中使用Moment详见

var Moment = require('Moment'); // require
Moment().format(); 
// ES6
import Moment from 'Moment';
Moment().format();

在这里我们就可以看到，当你创建 Moment.js 实例时，Moment.js 会加载所有函数。执行基本功能需要加载相当大的代码块。不可能导入特定的函数。因此，即使在加载基本日期时也会引入性能开销，因为您必须导入整个 API 链。

默认情况下，webpack 打包所有 Moment.js 语言环境（在 Moment.js 2.18.1 中，这是 160 缩小的 KB）。要去除不必要的语言环境并仅打包使用过的语言环境，请添加 moment-locales-webpack-plugin：

// webpack.config.js
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
    plugins: [
        // To strip all locales except “en”
        new MomentLocalesPlugin(),

        // Or: To strip all locales except “en”, “es-us” and “ru”
        // (“en” is built into Moment and can’t be removed)
        new MomentLocalesPlugin({
            localesToKeep: ['es-us', 'ru'],
        }),
    ],
};

Date-fns使用

安装date-fns

npm install date-fns --save
// or
yarn add date-fns

在项目中使用date-fns详见

import { format, compareAsc } from 'date-fns'

format(new Date(2014, 1, 11), 'MM/dd/yyyy')
//=> '02/11/2014'

const dates = [
new Date(1995, 6, 2),
new Date(1987, 1, 11),
new Date(1989, 6, 10),
]
dates.sort(compareAsc)
//=> [
//   Wed Feb 11 1987 00:00:00,
//   Mon Jul 10 1989 00:00:00,
//   Sun Jul 02 1995 00:00:00
// ]

Moment和Date-fns差异

特性差异	date-fns	moment
国际化	支持	支持
TypeScript	支持	支持
日期处理功能	提供丰富的日期处理函数	提供丰富的日期处理函数
大小和性能	相对较小，性能良好	相对较大，性能略低
API 设计	函数式编程，模块化	面向对象
可变性 vs. 不可变性	返回不可变的新日期对象	返回可变的日期对象
文档和社区支持	文档相对较少，社区支持较少	文档丰富，社区支持广泛
本地化支持	提供基本的本地化函数，需额外配置来实现复杂本地化需求	内置强大的本地化支持
浏览器和服务器支持	支持在浏览器和服务器端使用	同样支持在浏览器和服务器端使用
是否持续更新	是	否

Date-fns 合适吗？

它于 2017 年首次发布，因其简单性、不变性和性能而广受欢迎。然而，它已经很受欢迎并且正在快速增长：

既然 Moment.js 即将消失，那么Date-fns是否合适？以下是 Date-fns 成为替代 Moment.js 的理想选择的一些完美理由：
它是一个基于函数的 API。Date-fns 是许多小函数的集合，使用原生 Date 来操作日期对象。与 Moment.js 不同，您只导入需要的内容。只选择你需要的方法。
它的捆绑输出非常小，至少构建输出减少了至少 40%。
不可变的日期很好。Date-fns 不变性功能可确保从运行的函数返回新的 Date 实例。
其减小的尺寸提高了整体性能。
Date-fns 支持 tree-shaking 算法，使其可以与React、Webpack等工具一起使用。

结论

不管是用Moment还是用date-fns去处理日期格式，都是一个不错的选择，不能绝对的说哪个库好用，这取决于你的项目想要那些功能。