day.js ทางเลือกทดแทน moment.js (แค่ 2KB เอง มาลองใช้กันเถอะ)

Ekanant Phanuwatyingyong
2 min readAug 31, 2019

--

day.js

Front-end developer หรือ Javascript developer เวลาต้องทำอะไรซักอย่างเกี่ยวกับวันที่ เช่น

  • แสดงวันที่ในรูปแบบต่างๆ เช่น YYYY-MM-DD, DD-MM-YYYY, DD/MM/YYYY
  • แก้ไข เช่น หาวันที่ถัดไปในอีก 7 วัน
  • ตรวจว่า วัน xxx มาก่อนวัน yyy ใช่หรือไม่

โดยปกติคงจะคุ้นเคยกับ moment.js ซึ่งเป็น libraly สำหรับจัดการกับข้อมูลที่เป็น Date แต่วันนี้เรามี library จะมานำเสนอ day.js

day.js คืออะไร

Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.

สรุปสั้นๆ

day.js เป็น library ที่ใช้สำหรับ แปลง, ตรวจเช็ค, แก้ไข และแสดงวันที่ ที่มี function ให้เรียกใช้ได้เหมือนกับ moment.js

แล้ว day.js มันใช้ยังไง

dayjs('2018-08-08') // parsedayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // displaydayjs().set('month', 3).month() // get & setdayjs().add(1, 'year') // manipulatedayjs().isBefore(dayjs()) // query
ตัวอย่างการใช้งาน
ตัวอย่างการใช้งาน

จากตัวอย่าง จะเห็นได้ว่า การเรียกใช้งานจะคล้ายกับ moment.js ทำให้ไม่ต้องเรียนรู้ใหม่ ในการที่จะใช้ library ตัวนี้ สามารถดู repo ที่มีตัวอย่างได้ ที่นี่ ครับ

ก็มี Moment.js ให้ใช้อยู่แล้ว แถม Star Github ก็เยอะกว่าด้วย

เป็นเรื่องปกติอยู่แล้ว ที่การจะเปลี่ยนไปใช้อะไร ควรจะดูว่าเพราะอะไร มันถึงน่าจะทำให้เปลี่ยน โดยเหตุผลที่ น่าสนใจที่สุดคือ ขนาด เพราะว่าขนาดของ day.js นั้นเล็กจริงๆ ซึ่งจะขอใช้ bundlephobia ในการแสดงให้เห็นภาพมากขึ้น

bundlephobia.com
ตัวช่วยในการวิเคราะห์คราวนี้ bundlephobia.com

จากนั้นเราก็ใส่คำว่า moment เพื่อให้ bundlephobia หาข้อมูลเกี่ยวกับ package มาให้

ข้อมูล bundle size ของ moment.js จาก bundlephobia
ข้อมูล bundle size ของ moment.js จาก bundlephobia

จะเห็นได้ว่า size ของ moment นั้น gzip แล้วอยู่ที่ 65.9 KB เวลาที่ใช้โหลดบน 3g คิดเป็น 1.32 sec. ซึ่งถือว่าขนาดใหญ่อยู่เหมือนกัน ทีนี้เรามาดูของทางฝั่ง day.js บ้าง

ข้อมูล bundle size ของ day.js จาก bundlephobia
ข้อมูล bundle size ของ day.js จาก bundlephobia

จะเห็นได้ว่า ขนาดของ day.js นั้น จะอยู่ที่ 2.8 KB เวลาที่ใช้โหลดบน 3g คิดเป็น 55 ms. คำนวณคร่าวๆ แล้ว day.js นั้น เล็กกว่า moment ถึง 23.54 เท่า เลยทีเดียว

สรุป

ถ้า web application ของคุณที่ไม่ว่าจะใช้ library, framework ต่างๆ ในการทำ เช่น vue, react, next.js, nuxt.js และมีการใช้ library ที่จัดการ Date และกำลังหาทาง optimize bundle ให้เล็กลง

การเริ่มเปลี่ยนมาใช้ day.js แทนก็เป็นอีกทางหนึ่งที่จะช่วยให้ bundle size ของคุณมีขนาดที่เล็กลงได้อย่างทันตาเห็น

--

--

Ekanant Phanuwatyingyong

Just an extreme full stack developer with an interest in Next.js (React), GoLang, GraphQL and have a background in java, php, sql, elasticsearch, etc.