Treeshaking Date-Fns with Webpack 4

Hello everyone,

has anyone here imported functions from date-fns and seen tree-shaking work with a current Aurelia project (Webpack 4)?
There are some discussions in the interewbs, but it seems like they all refer to older webpack versions and plug-ins that should imho not be necessary.

Best

1 Like

Tree-shaking creates problems that should not exist in first place. You can turn it off in webpack config.

At least Aurelia v1 doesn’t rely on it. Tree-shaking would not reduce much on Aurelia part. Check your bundle size change, if the difference is insignificant, why bother to use the troublesome feature.

2 Likes

Only loading the functions i need would be better, but i am not shure how.

You suggest doing so by using

import format from ‘date-fns/format’

instead of

import {format} from ‘date-fns/esm’

and tree-shaking?

1 Like

No that. I meant to turn off optimization.usedExports (for tree-shaking) in webpack config for any env (development/production). Then you can forget about tree-shaking. However, you might want to double check your final bundle size to see how much is the inflation without tree-shaking.

1 Like

Got that. Thank you. But my main point still is:

How can i import 1 or 2 functions without adding the whole library to my bundle.
I´d prefer not to add 170kb when all i need is a few bytes. Thought that was date-fns main USP.

1 Like

Oh, I see. If date-fns is not friendly with tree-shaking, then your inner import should work. You can check your local node_modules/date-fns/ for available files.

2 Likes

If you just want to check whether tree-shaking does work on your date-fns (it should work), you can run au run --analyze --env prod, you should see a graph where you can drill down to packed files for date-fns.

Update: typo, it’s --analyze.

2 Likes

I just checked date-fns. Sorry, webpack would not tree-shake it, because webpack only tree-shakes libs in ESM format (with import and export statements), but date-fns ships code in commonjs format.

You have to use inner import.

2 Likes

Thank you very much, but i think they do ship ESM, see here. I even checked Babel-Config to not convert to CommonJs - no effect. :frowning:
I have moved this question to Stack Overflow.

1 Like

I just checked my package.json and guess what i found:
“date-fns”: “^1.30.1”

Thank you very much huochunpeng for talking this through.

1 Like

Yes. V2 is not production version.

npm i date-fns@next

To get latest v2.

2 Likes