In this article, I'll look at application size with multiple methods imported from date-fns. In the previous benchmark attempt, I was only using 1 method from each library. date-fns, as the only one built with tree-shaking in mind, enjoyed an advantage in this comparison that it will not have in real-world applications.

Dependencies & build scripts

All project details are as before. You can check the previous article to find out more.

The test idea

To make a more fair comparison, I want to add more date operations. Such as:

finding a start of a period
counting difference between dates
formatting

Naive code

First, let's try all-purpose formatting:

import { sub, startOfQuarter, format, differenceInDays } from "date-fns";

const today = new Date(),
  quarterStart = startOfQuarter(today),
  diffDays = differenceInDays(today, quarterStart);

console.log("Yesterday was", sub(today, { days: 1 }));

console.log(
  "The quarter started on",
  format(monthStart, "yyyy-mm-dd"),
  "and today, it is",
  diffDays,
  "days since then"
);

The first downside, the formatting tokens are different than in Moment.js & other libraries. It means we will have to map all the values as we migrate.

The other downside is the build size:

webpack - 22.2 KiB
esbuild - 23.0 KiB

Which is more than what I got in Day.js benchmark.

Formatting optimization

Ok, we use a library optimized for tree-shaking. Maybe we shouldn't import the most complex method from it. We can make some effort to optimize the format, especially as they provide many methods for it:

Updated code

import { sub, startOfQuarter, formatISO9075, differenceInDays } from "date-fns";

const today = new Date(),
  quarterStart = startOfQuarter(today),
  diffDays = differenceInDays(today, quarterStart);

console.log("Yesterday was", sub(today, { days: 1 }));

console.log(
  "The quarter started on",
  formatISO9075(quarterStart, { representation: "date" }),
  "and today, it is",
  diffDays,
  "days since then"
);

The build size:

webpack - 3.63 KiB
esbuild - 3.6 KiB

This is much better and about half of what adds Day.js.

Links

The examples used here have their own branches - the naive formatting & the final code

Summary

It looks like date-fns is indeed the smallest option, as long as we are willing to invest the effort to find alternatives to use the all-purpose format method.

What is the size impact of importing multiple methods from date-fns

Comments

Date libraries build benchmark

How to use quarters in Day.js

More from this blog

Changes in programming made possible with AI

Advantages of unit testing—with examples in Jasmine

Pure functions and basic tests in Jasmine

How to prepare for a job interview

How to build a demo project

Dependencies & build scripts

The test idea

Naive code

Formatting optimization

Updated code

Links

Summary

Command Palette

Comments

Date libraries build benchmark

How to use quarters in Day.js

More from this blog

Dependencies & build scripts

The test idea

Naive code

Formatting optimization

Updated code

Links

Summary