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.
Top comments (0)