五分钟减轻你的前端应用 ﹣ day.js 篇

7,610 阅读2分钟

前言

在處理時間日期的時候,除了使用原生的函數之外,便是強大的 Moment.js。不過,它的重量經常是打包體積過大問題的兇手。因而,轉而使用輕量的 day.js 的話,能夠大大省下用戶需要加載的體積,加速網站加載速度。

特點

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

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

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

安裝

  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 上面下手,也可以從選擇素材入手。

參考資料

  1. Github - iamkun/dayjs