大幅減少加載體積:升級至 day.js 擺脫 Moment.js 的笨重

大幅減少加載體積:升級至 day.js 擺脫 Moment.js 的笨重
作者: Calpa Liu
字數:3455
出版日期:September 19, 2018
更新日期:December 7, 2023
分類: #前端開發
#JavaScript

day.js 提供了處理日期的方法,並且擁有與 Moment.js 完全相同的API。這輕量級的日期庫能夠有效地減少網頁的加載體積,從而提高網站的加載速度,為用戶提供更好的體驗。

特點

Moment.js 的 2kB 輕量化方案,擁有同樣強大的 API

Day.js 是一個輕量的處理時間和日期的 JavaScript 庫,和 Moment.js 的 API 設計保持完全一樣。如果您曾經用過 Moment.js, 那麼您已經知道如何使用 Day.js

不僅這樣,它還兼容全瀏覽器,支持 Chain 操作,不會修改原本的數據。

Imgur

安裝

  1. 透過 NPM:
npm install dayjs --save
import dayjs from 'dayjs'
// const dayjs = require('dayjs');
dayjs().format();
  1. CDN
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/dayjs"></script>
<script>
  dayjs().format();
</script>

如何使用

Day.js 和 Moment.js 的 API 設計保持完全一樣。

如果你使用過後者的話,你也可以毫無壓力轉移到 Day.js。

如果你沒有使用過的話,這裡會是一個簡單的日期處理例子:

dayjs("2018-09-19"); // 解析

dayjs().format("{YYYY} MM-DDTHH:mm:ss SSS [Z] A"); // 加格式

dayjs()
  .set("month", 3)
  .month(); // 把月份改為三月

dayjs().add(1, "second"); // 加一秒

你也可以透過 官方文檔 查閱 API。

國際化 I18n

需手動加載,按需加載

import "dayjs/locale/es"; // 按需加載

dayjs.locale("es"); // 全局使用西班牙語

dayjs("2018-05-05")
  .locale("zh-tw")
  .format(); // 局部使用繁體中文

如果你有興趣了解源碼的話,可以打開 /src/locale/

這裡是繁體中文的在地化處理:

import dayjs from "dayjs";

const locale = {
  name: "zh-tw",
  weekdays: "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
  weekdaysShort: "週日_週一_週二_週三_週四_週五_週六".split("_"),
  weekdaysMin: "日_一_二_三_四_五_六".split("_"),
  months: "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split(
    "_"
  ),
  monthsShort: "1 月_2 月_3 月_4 月_5 月_6 月_7 月_8 月_9 月_10 月_11 月_12 月".split("_"),
  ordinal: n => `${n}日`,
  relativeTime: {
    future: "%s 內",
    past: "%s 前",
    s: "幾秒",
    m: "1 分鐘",
    mm: "%d 分鐘",
    h: "1 小時",
    hh: "%d 小時",
    d: "1 天",
    dd: "%d 天",
    M: "1 個月",
    MM: "%d 個月",
    y: "1 年",
    yy: "%d 年"
  }
};

dayjs.locale(locale, null, true);

export default locale;

插件

另外,它允許加載插件,你了解過之後也可以自己寫一個插件

import advancedFormat from "dayjs/plugin/advancedFormat"; // 按需加載插件

dayjs.extend(advancedFormat); // 使用插件

dayjs().format("Q Do k kk X x"); // 使用擴展後的 API

實戰部分

我的博客已經使用 dayjs 作為日期處理工具。 以本篇文章的日期為例:

  1. RSS 訂閱 (feed.xml)
const url = `${site.siteMetadata.siteUrl}/${dayjs(edge.node.createdDate).format(
  "YYYY/MM/DD"
)}/${edge.node.url}`;

const date = dayjs(edge.node.createdDate).format("MMMM DD, YYYY, h:mm A");
  1. 博客文章日期
const date = dayjs(createdDate).format("YYYY/MM/DD");
  1. 內文日期
const date = dayjs(createdDate).format("YYYY/MM/DD");
  1. Gitalk 評論區 從上一篇文章可以得知,2018 年 3 月 1 日 Github 有標籤字數限制。

另外,我在 2018 年 9 月 9 日後直接使用 id 作為查詢的 id。

const issueDate = "2018-03-01";
const idDate = "2018-09-09"; // 修理遺留代碼錯誤
const { createdDate, title } = this.data.content.edges[0].node;
let { id } = this.data.content.edges[0].node;

let finalTitle = title;
if (dayjs(createdDate).isAfter(issueDate)) {
  finalTitle = `${title} | Calpa's Blog`; // For Create Github Issue

  if (dayjs(createdDate).isBefore(idDate)) {
    id = md5(title);
  }
} else {
  const pathname = getPath();
  const lastSymbol = pathname[pathname.length - 1] === "/" ? "" : "/";
  id = `${url}${pathname}${lastSymbol}`;
}

後記

要輕量化你的網站,其實可以很容易。除了在 Webpack 上面下手,也可以從選擇素材入手。

要實現網站的輕量化,方法其實相當簡單。除了優化 Webpack 配置,也可以從素材的選擇入手。

在 2023 年,我成功將網站從 GatsbyJS 遷移到 Astro,這一舉措極大地減輕了瀏覽器運行 JavaScript 的負擔,顯著提升了靜態頁面的加載性能。

文章:重構博客網站:Astro 與 Vue 重構心得分享

參考資料

  1. Github - iamkun/dayjs
感謝您閱讀我的文章。歡迎隨時分享你的想法。
關於 Calpa

Calpa 擅長使用 TypeScript、React.js 和 Vue.js 開發Responsive Web Design網站。

此外,Calpa 積極參與香港和台灣的開源社區,曾在2019年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過300顆星星和60個分支的支持。

更多前端開發技術文章:傳送門