Locales bloating bundle size to 896kb

[devuxer]

I have a simple setup with Create React App (CRA) v5.0.

All my imports are of this form:

import { parseISO } from "date-fns";

I'm not importing anything form "date-fns/locale" (or any other sub branch of date-fns). I only need EN/US for this app.

When I do a production build and analyze with source-map-explorer, this is what I see:

I've read the issues and other discussions here on bundle size, but haven't come across a solution to my particular problem (at least without ejecting CRA, which I hope is not necessary).

What could I be doing wrong?

Related: #3004

[fturmel]

Hi @devuxer,

Can't reproduce the problem over here with CRA 5.0.1, date-fns 2.28, source-map-explorer 2.5.2 and this small demo app:

// src/App.js

import { format, parseISO } from 'date-fns';

function App() {
    return (
        <>
            <div>Current date: {format(new Date(), 'yyyy-MM-dd')}</div>
            <div>Parse: {parseISO('2022-05-14').toLocaleString()}</div>
        </>
    );
}

export default App;

I'm not importing anything from "date-fns/locale"

Something in your app must be importing locales, because the library itself only references en-US and only does so for functions with a locale option.

What could I be doing wrong?

Some ideas to investigate:

• Are you using another npm package that could also be using date-fns and importing the locales in bulk? Run npm why date-fns and see if anything comes up.
• Have you changed or added something to the webpack / build step?
• Are you loading date-fns from some pre-bundled CDN source? Is it possible that the source of the library was already bundled in a way that webpack can't tree-shake anymore?
• I find it interesting/puzzling that your bundle report only seems to contain the locales and no date-fns functions, but maybe this is just the way you cropped your screenshot.

Maybe you can share your package.json file, or even better put together the smallest possible app that manages to reproduce the problem.

Hope that helps.

[devuxer]

@fturmel,

Very helpful reply, thanks.

Running npm why date-fns reminded me that Ant Design (antd) has date-fns as a dependency (technically, it's the rc-picker component that antd uses for it's date picker), which led me to this live issue:

react-component/picker#232

So, looks like date-fns itself is not to blame.