[pref]: refactor date-fns import/use about flat

[hyrious]

I doubt your webpack config is not tweaked well to do tree shaking.
I also made some experiment with bundlers:

Setup

mkdir test-date-fns && cd test-date-fns
npm init -y
npm i -D date-fns esbuild rollup @rollup/plugin-node-resolve webpack webpack-cli

index.js

import { format } from "date-fns";
import { addBusinessDays } from "date-fns/fp";

// `console.log` is required for rollup to mark side effects
console.log(format, addBusinessDays);

webpack.config.js 😒

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.webpack.js',
        path: __dirname,
    },
    mode: 'development',
    devtool: false, // required to make `eval(string)` shorter
    optimization: {
        usedExports: true,
    }
}

Let's see:

npx esbuild index.js --bundle --outfile=bundle.esbuild.js

  bundle.esbuild.js  51.7kb

Done in 252ms

npx rollup -i index.js -p node-resolve -o bundle.rollup.js

index.js → bundle.rollup.js...
created bundle.rollup.js in 3.8s
ls bundle.rollup.js
88,941 bundle.rollup.js

npx webpack
asset bundle.webpack.js 140 KiB [compared for emit] (name: main)
orphan modules 533 KiB [orphan] 467 modules
runtime modules 396 bytes 2 modules
cacheable modules 92.2 KiB
...

file	size	description
bundle.esbuild.js	51.7kb	esbuild strips comments by default
bundle.rollup.js	88.94kb	-
bundle.webpack.js	140kb	webpack inserts a lot of runtime codes

The difference is webpack generates a lot of /* harmony export */ things and esbuild strips comments. In short, they both do tree shaking well.

To make it fair, I also include minified results here (rollup use terser plugin, esbuild use itself):

file	size
bundle.esbuild.js	22,54kb
bundle.rollup.js	21.95kb
bundle.webpack.js	21.77kb

As you can see, they are almost the same.

[BlackHole1]

@hyrious
i will try again in the near future, following your webpack config.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.