concurrently imports the entire date-fns library without tree-shaking but use only 1 function

[guillaumeprevost]

I have found this issue while investigating why my project still had the entire date-fns library bundled even if I was carefully importing and using only a few functions.

date-fns provides a syntax that will allow bundlers like Webpack to do some "tree-shaking" and only import the needed modules rather than the full library, optimizing greatly the total bundle size.

It seems like concurrently doesn't use this syntax, which causes to import the full date-fns library instead of only the single function used in logging (formatDate in logger.ts and log-timings.ts).

How found this :

I had opened an issue about this originally on the date-fns repo because I thought it came from there.

After some discussions around the issue, someone mentioned here that it could come from another dependency importing all of date-fns by not using tree-shaking syntax. The recommendation was to use npm why date-fns to spot which other dependency may use date-fns.

When running that command, it only listed my own references to date-fns (using the syntax allowing tree-shaking) and the concurrently library.

[gustavohenke]

The two files you mention are importing a single export from date-fns:

concurrently/src/logger.ts

Line 3 in 74412ba

import formatDate from 'date-fns/format';

concurrently/src/flow-control/log-timings.ts

Line 1 in 74412ba

import formatDate from 'date-fns/format';

What is the problem exactly...?

[guillaumeprevost]

The problem is that in the final bundle, the entire date-fns library is there , making the bundle much larger than it should be.

Indeed it seems that raised the lines should only import a single function, but that's not the case. Maybe this could work with the suggested syntax in their documentation :

import { formatDate } from 'date-fns'

Or maybe the issue comes from erro in tree-shaking within the date-fns library itself ?

[gustavohenke]

@guillaumeprevost can you provide a sample repo?
To begin with, I'm not sure how bundling is happening (are you building a desktop app?), so any help for me to understand which changes should be made would be great

[paescuj]

# Analyzing the bundle of simple 'concurrently' import with esbuild
tmpdir=$(mktemp -d)
pushd "$tmpdir" >/dev/null
npm install concurrently esbuild >/dev/null

echo "import concurrently from 'concurrently'; concurrently(['echo test']);" | \
npx esbuild --bundle --platform=node --analyze --outfile=/dev/null 2> >(grep date-fns)

popd >/dev/null
rm -r "$tmpdir"

   ├ node_modules/date-fns/_lib/format/formatters/index.js                           19.5kb    2.5%
   ├ node_modules/date-fns/format/index.js                                            4.8kb    0.6%
   ├ node_modules/date-fns/locale/en-US/_lib/localize/index.js                        4.0kb    0.5%
   ├ node_modules/date-fns/locale/en-US/_lib/match/index.js                           3.8kb    0.5%
   ├ node_modules/date-fns/_lib/format/longFormatters/index.js                        2.4kb    0.3%
   ├ node_modules/date-fns/locale/en-US/_lib/formatDistance/index.js                  2.4kb    0.3%
   ├ node_modules/date-fns/_lib/format/lightFormatters/index.js                       2.3kb    0.3%
   ├ node_modules/date-fns/_lib/getUTCWeekYear/index.js                               2.2kb    0.3%
   ├ node_modules/date-fns/locale/_lib/buildMatchFn/index.js                          1.8kb    0.2%
   ├ node_modules/date-fns/_lib/protectedTokens/index.js                              1.6kb    0.2%
   ├ node_modules/date-fns/_lib/startOfUTCWeekYear/index.js                           1.5kb    0.2%
   ├ node_modules/date-fns/_lib/getUTCISOWeekYear/index.js                            1.5kb    0.2%
   ├ node_modules/date-fns/_lib/startOfUTCWeek/index.js                               1.5kb    0.2%
   ├ node_modules/date-fns/locale/en-US/_lib/formatLong/index.js                      1.3kb    0.2%
   ├ node_modules/date-fns/toDate/index.js                                            1.2kb    0.2%
   ├ node_modules/date-fns/locale/_lib/buildLocalizeFn/index.js                       1.2kb    0.2%
   ├ node_modules/date-fns/locale/en-US/index.js                                      1.0kb    0.1%
   ├ node_modules/date-fns/locale/_lib/buildMatchPatternFn/index.js                   1.0kb    0.1%
   ├ node_modules/date-fns/_lib/getUTCWeek/index.js                                  1012b     0.1%
   ├ node_modules/date-fns/_lib/getUTCISOWeek/index.js                               1003b     0.1%
   ├ node_modules/date-fns/_lib/startOfUTCISOWeekYear/index.js                        993b     0.1%
   ├ node_modules/date-fns/_lib/getUTCDayOfYear/index.js                              984b     0.1%
   ├ node_modules/date-fns/_lib/startOfUTCISOWeek/index.js                            916b     0.1%
   ├ node_modules/date-fns/addMilliseconds/index.js                                   857b     0.1%
   ├ node_modules/date-fns/isValid/index.js                                           842b     0.1%
   ├ node_modules/date-fns/subMilliseconds/index.js                                   813b     0.1%
   ├ node_modules/date-fns/locale/en-US/_lib/formatRelative/index.js                  716b     0.1%
   ├ node_modules/date-fns/_lib/getTimezoneOffsetInMilliseconds/index.js              678b     0.1%
   ├ node_modules/date-fns/locale/_lib/buildFormatLongFn/index.js                     663b     0.1%
   ├ node_modules/date-fns/isDate/index.js                                            646b     0.1%
   ├ node_modules/date-fns/_lib/toInteger/index.js                                    601b     0.1%
   ├ node_modules/date-fns/_lib/addLeadingZeros/index.js                              559b     0.1%
   ├ node_modules/date-fns/_lib/requiredArgs/index.js                                 518b     0.1%

It seems to me that only the required files are bundled... Am I wrong?

---

Besides that, the suggested import syntax doesn't work:

src/logger.ts:3:10 - error TS2305: Module '"date-fns"' has no exported member 'formatDate'.

3 import { formatDate } from 'date-fns';

[paescuj]

Closing this as I don't see any room for improvement here on our side. Please open a new issue with a reproduction if this is still a problem.

[guillaumeprevost]

Hi, yes that's fair enough.. I did not have any free time to work on a minimal reproduction of this issue.
Thank you

[jpolo]

I've been investigating why node_modules is so heavy on some of my projects. Many libraries could be the cause but concurrently is on top of it. The main reason is that concurrently uses rxjs and date-fns as dependency. Those packages weight more than 10mo each. This could be problematic, especially in a CI environment...

There might be improvement from concurrently to be "lighter".

[paescuj]

I've been investigating why node_modules is so heavy on some of my projects. Many libraries could be the cause but concurrently is on top of it. The main reason is that concurrently uses rxjs and date-fns as dependency. Those packages weight more than 10mo each. This could be problematic, especially in a CI environment...

There might be improvement from concurrently to be "lighter".

Yeah, this is actually another reason why I came up with #366 👍