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

Marcin Wosinek's photo
Marcin Wosinek
·

2 min read

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:

date-fns-format.png

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.

JavaScript