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

In this article, I'll look at application size with multiple methods imported from [date-fns](https://date-fns.org/). 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](https://how-to.dev/what-is-the-size-impact-of-importing-one-method-from-date-fns) 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:

```js
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](https://how-to.dev/what-is-the-size-impact-of-importing-dayjs) 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1628146026102/kxrslPOhy.png)

## Updated code
```js
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](https://github.com/marcin-wosinek/date-fns-bundle-size/tree/naive-format) & the [final code](https://github.com/marcin-wosinek/date-fns-bundle-size/tree/second-round)

# 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](https://date-fns.org/v2.23.0/docs/format).