Treeshaking Date-Fns with Webpack 4

Help Requests
1

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
2

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
3

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
4

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
5

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
6

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
7

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
8

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
9

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
10

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
11

Yes. V2 is not production version.

npm i date-fns@next

To get latest v2.

2 Likes