Help with bundle size

[weniver]

Hi, I'm replacing moment.js for date-fns with one of the objectives of reducing bundle size but I'm getting very similar bundle sizes. I was expecting a different result so I was wondering if I did something wrong or if I missed a step. Any help is welcomed.

I'm using:

import { format, formatDistanceStrict, formatISO } from "date-fns";
import { es, fr, frCA, enCA, pt, ptBR } from "date-fns/locale";

and my bundle size is 146kb (from locales 58k and from format 67k):

Is this a normal bundle size or am I missing something?

Thanks!

[fturmel]

Hi @weniver,

This looks right to me.

Stat is the size of the inputs sent to webpack before any tree-shaking or transforms take place, so I would focus more on parsed or gzip sizes which are representative of your final bundle. https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/master/README.md#size-definitions

At 10.32 KB gziped, I would assume that your bundle size would be measurably smaller than with moment.js as they advertise their minified gzip sizes at 18 KB without locales and 73 KB with locales. Is this not the case?

Also check out the Bundlephobia page for a very nice breakdown of function sizes in the "exports analysis" section: https://bundlephobia.com/package/date-fns

Hope this helps!

[weniver]

Thanks, this is very helpful! I'll check all!

[weniver]

It's my first time checking bundle sizes and optimization and I was a little bit confused, but this was super helpful. Thanks a lot!

[fturmel]

Awesome, happy to help!