In this article, I'll take a quick look at the build size of a simple code that imports a method from date-fns. I check results from both, webpack & esbuild.

The code

The code I use in this test is as follows:

import { sub } from "date-fns";

const today = new Date();

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

In this way, I can:

Test the impact of an import of the code needed to do one simple operation
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:

webpack --mode=production

Standard webpack build, with production mode, set explicitly.

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

$ 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

$ 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.

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.

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

Comments

Date libraries build benchmark

What is the size impact of importing luxon - a date manipulation library

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

The code

Build scripts

The benchmark

Webpack

esbuild

Links

Summary

Command Palette

Comments

Date libraries build benchmark

What is the size impact of importing luxon - a date manipulation library

More from this blog

The code

Build scripts

The benchmark

Webpack

esbuild

Links

Summary