# What is the size impact of importing one method from date-fns

In this article, I'll take a quick look at the build size of a simple code that imports a method from [date-fns](https://date-fns.org/). I check results from both, webpack & [esbuild](https://how-to.dev/series/esbuild).

# The code
The code I use in this test is as follows:

```js
import { sub } from "date-fns";

const today = new Date();

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

In this way, I can:

1. Test the impact of an import of the code needed to do one simple operation
2. Check the output code quickly in the console log - so I don't compare working builds with broken ones.

## Build scripts
The builds are run with:
```sh
webpack --mode=production
```
Standard webpack build, with production mode, set explicitly.

```sh
esbuild src/index.js --outfile=dist/main.js --bundle --minify
```

Fairly simple esbuild command, with `--minify` on & required `--bundle` flag.

# The benchmark
Both wepback & esbuild performed pretty much the same.

## Webpack
```sh
$ npm run webpack       

> date-fns-bundle-size@1.0.0 webpack
> webpack --mode=production

asset main.js 1.59 KiB [compared for emit] [minimized] (name: main)
orphan modules 546 KiB [orphan] 264 modules
./src/index.js + 8 modules 11.6 KiB [built] [code generated]
webpack 5.47.1 compiled successfully in 858 ms

$ stat dist/main.js 
  File: dist/main.js
  Size: 1633      ...
```

The output size is about **1.6 KiB**.

## esbuild

```sh
$ npm run esbuild  

> date-fns-bundle-size@1.0.0 esbuild
> esbuild src/index.js --outfile=dist/main.js --bundle --minify


  dist/main.js  1.6kb

⚡ Done in 40ms

# stat dist/main.js
  File: dist/main.js
  Size: 1624      ...
```

# Links

The test repo I've been using in this article is [here](https://github.com/marcin-wosinek/date-fns-bundle-size).

# Summary
In this article, we have seen the isolated impact of imports of one method from date-fns. In the following articles in this series, I'll look at other popular date manipulation libraries.