等待Moment.js！

啊，日期和时间。 在开发过程中处理这是一件很有趣的事情。 在某些情况下 ，就方便性而言，我们需要的Date对象不能提供给我们更多的东西时，我们转向日期包装库，例如Moment.js 。

Moment.js是一个JavaScript库，旨在同时在客户端（在浏览器中）和服务器端（在Node.js中）工作。 它具有很多分析，显示和处理日期的功能。 这样可以减少约会的痛苦。

我同意这会使事情减轻痛苦，但让我们看一下源代码中发生的事情。 假设我们假设我必须计算出我的生日到英国纳税年度的最后一天之间有多少天。

让我们使用Moment.js来做到这一点。 考虑以下代码：

时刻示例

从纳税年度的最后一天到我的生日之间有166天

好的，我们现在可以计算天数了。 简单的东西，以及从现在起非常方便的方法。 那么，在执行过程中要获得此结果是怎么回事？

请注意：我正在分析应用程序的生产版本，并且正在以隐身模式查看。

Fabian Grohs在Unsplash上拍摄的照片

好的，首先，我的主捆绑包总共是66KB。 瞬间就是其中的51KB，占我捆绑包的77％。 该库正在提取大约4500行代码。 使用Chrome开发者工具中的JavaScript Profiler，我可以看到在示例中使用的3个函数的源代码中立即调用了23个函数。

如果我在纳税年度的最后一天创建了一个Moment对象，则总共调用18个函数。 通过汇总慢速3G连接上的所有函数调用记录了5ms。

花费时间最长的时刻的内部功能是：

1. createFromConfig（0.9ms）
2. createLocal（0.9ms）
3. createLocalOrUTC（0.8ms）

现在，我知道您在想什么，这太少了。 可怕的微观优化。 当然，这取决于问题的情况以及日期逻辑的复杂程度，但是是否需要导入软件包来执行此操作始终值得一看。 就我而言，我会说它是不需要的。 因此，我决定转向一个名为date-fns的库，以查看其比较。

date-fns库是模块化的，因此有所不同，这意味着您只需导入所需的功能。 当然，这将减小最终捆的尺寸。 它不会像Moment那样尝试创建自己的对象，而是仍然使用JavaScript提供的本机Date对象。

日期FNS示例

从date-fns使用此DifferenceInDays函数花费的总时间为0.1ms。 它需要其他3个内部模块来完成任务，但与力矩相比要轻得多。 我的捆绑包的文件大小为18KB。 这意味着date-fns的功能只有3KB才能实现！

Ian Stauffer在Unsplash上的照片

花一刻的时间来观察包的大小并改善整体页面性能。

很抱歉的畏缩可以双关语。 感谢您的阅读，如果发现有用的话，请拍一下。 在评论中期待9月中旬的生日快乐：)伙计…我要老了。

肖恩·迈克尔·斯通
推特：@shaunmstone

From: https://hackernoon.com/wait-a-moment-js-80e329fcfc3