preface

In addition to using native functions when dealing with dates and times, it’s powerful moment.js. However, its weight is often the culprit behind the problem of over-size packaging. Therefore, switching to lightweight Day.js will save users a lot of volume and speed up site loading.

The characteristics of

Moment.js’s 2kB lightweight solution has an equally powerful API

Day.js is a lightweight JavaScript library that handles times and dates, keeping exactly the same API design as moment. js. If you’ve ever used moment.js, do you already know how to use day.js

Not only that, it is fully browser-compatible, supports Chain operations, and does not modify the original data.

The installation

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

How to use

The API design of day. js and moment. js remains exactly the same.

If you’ve used the latter, you can also move to day.js without pressure.

Here’s a simple example of date handling if you haven’t already:

Dayjs ('2018-09-19') // dayjs().format('{YYYY} mm-ddthh: MM :ss SSS [Z] A') // dayjs().set(' 2018-09-19') // dayjs('2018-09-19').format('{YYYY} mm-DDthh: MM :ss SSS [Z] A') 3). The month () / / changed in to march dayjs (). The add (1, 'second') / / add a secondCopy the code

You can also check out the API through the official documentation.

Internationalization I18n

Load manually and on demand

Import 'dayjs/locale/es' // load dayjs.locale('es') // Globally use Spanish dayjs('2018-05-05').locale(' zh-TW ').format() // Partially use traditional ChineseCopy the code

If you’re interested in the source code, open/SRC /locale/.

Here is the localization of traditional Chinese:

import dayjs from 'dayjs' const locale = { name: 'zh-tw', weekdays: 'Sunday _ _ on Monday Tuesday Wednesday _ _ _ _ Thursday Friday Saturday'. The split (' _ '), weekdaysShort: 'Sunday _ _ _ _ _ _ on Friday on Thursday on Wednesday on Tuesday on Monday' on Saturday. The split (' _ '), weekdaysMin: 'day _ a _ 2 _ 3 _ 4 _ _ five six'. The split (' _ '), have: 'January February _ _ _ _ _ _ in March April may June July August _ _ _ _ _ in September October November December'. The split (' _ '), monthsShort: '_3 _2 January month month _8 _7 _6 _5 _4 month month month month month _12 _11 _10 _9 month month month month'. The split (' _ '), the ordinal: n = > ${n} day ` `, relativeTime: {future: '% s', past: '% s' before, s:' seconds' m: '1 minute, mm:' % d minutes' h: '1 hour, hh:' % d hours' d: 'one day', dd: '% d days, m:' 1 ', mm: '% d months', y: Locale (locale, NULL, true) export default localeCopy the code

The plug-in

In addition, it allows you to load plug-ins, and you can write your own plug-ins after you learn about them

Import advancedFormat from 'dayjs/plugins/advancedFormat / / on-demand dayjs loading plug-ins. The extend (advancedFormat) / / using the plugin Dayjs ().format('Q Do k kk X X ') // Use the extended APICopy the code

Actual part

My blog already uses DayJS as a date processing tool. Take the date of this article as an example:

  1. RSS feeds (XML feed.)
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');
Copy the code
  1. Date of blog post
const date = dayjs(createdDate).format('YYYY/MM/DD');
Copy the code
  1. Nevin date
const date = dayjs(createdDate).format('YYYY/MM/DD');
Copy the code
  1. As we learned from our last post, Github has a tag word limit starting March 1, 2018.

In addition, I directly used ID as the ID of the query after September 9, 2018.

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}`; }Copy the code

Afterword.

To lightweight your website, it can actually be very easy. In addition to starting with Webpack, you can also start by selecting materials.

The resources

  1. Github – iamkun/dayjs