天天看點

moment.min.js_等待Moment.js!

moment.min.js

moment.min.js_等待Moment.js!

啊,日期和時間。 在開發過程中處理這是一件很有趣的事情。 在某些情況下,我們需要的不僅僅是Date對象所提供的便利,我們轉向日期包裝庫,例如Moment.js 。

Moment.js是一個JavaScript庫,旨在同時在用戶端(在浏覽器中)和伺服器端(在Node.js中)工作。 它具有很多分析,顯示和處理日期的功能。 這樣可以減少約會的痛苦。

我同意這會使事情減輕痛苦,但是讓我們看一下源代碼中發生了什麼。 假設我們假設我必須計算出我的生日到英國納稅年度的最後一天之間有多少天。

讓我們使用Moment.js來做到這一點。 考慮以下代碼:

時刻示例

moment.min.js_等待Moment.js!

從納稅年度的最後一天到我的生日之間有166天

好的,我們現在可以計算天數了。 簡單的東西,以及從現在起非常友善的方法。 那麼,在執行過程中要獲得此結果是怎麼回事?

請注意:我正在分析我的應用程式的生産版本,并且正在以隐身模式檢視。

moment.min.js_等待Moment.js!

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示例

moment.min.js_等待Moment.js!

從date-fns使用此DifferenceInDays函數花費的總時間為0.1ms。 它需要其他3個内部子產品來完成任務,但與力矩相比要輕得多。 我的捆綁包的檔案大小為18KB。 這意味着date-fns的功能隻有3KB才能實作!

moment.min.js_等待Moment.js!

Ian Stauffer在Unsplash上的照片

花一刻的時間來觀察包的大小并提高整體頁面性能。

很抱歉的畏縮可以雙關語。 感謝您的閱讀,如果發現有用的話,請拍一下。 在評論中期待9月中旬的生日快樂:)夥計…我要老了。

肖恩·邁克爾·斯通

推特:@shaunmstone

翻譯自: https://hackernoon.com/wait-a-moment-js-80e329fcfc3

moment.min.js