generatePicker imports all locales, with huge impact on bundle size

When swapping out moment.js with either day.js or date-fns, the generatePicker function imports all of the locales.

This results in a huge bundle and totally not needed in a lot of use cases. dateFns.ts#L26

Is there a way to get around this? It seems a little silly to have pre-loaded all locales when you only need one 😃

[ekeijl]

Webpack alias to the rescue!

Create ./date-fns-locale.js next to your Webpack config. Here you re-export all the locales you need:

export { default as enGB } from 'date-fns/locale/en-GB';
export { default as enUS } from 'date-fns/locale/en-US';

export { default as fr } from 'date-fns/locale/fr';
// ...etc

Here is the full list.

Add an alias to your webpack.config.js:

	resolve: {
		alias: {
			'date-fns/locale$': require.resolve('./date-fns-locales.js')
		}
	},

Mind the $ in the name! As explained in the Webpack alias documentation: this will only match imports ending in "date-fns/locale" and ensures that we can still import from "date-fns/locale/en-GB". Beware that other places you import x from "date-fns/locale" will also be aliased to date-fns-locales.js.

The resulting bundle:

---

Edit: if you try to use a locale that is not exported from your date-fns-locales.js, you will get the error Cannot read property 'localize' of undefined.

To use en-GB you also need to include en-US as it extends from the US locale! (I fixed this in the code above)

[devuxer]

@matheusgrieger ,

That’s amazing!

But it made me realize that even though I’m using Antd/rc-picker, the locales seem to be getting loaded by date-fns itself.

Any thoughts on what could be causing this? I’m hoping I can use a similar hack to fix that, but I’m not sure where to look.

EDIT No, I’m wrong. I forgot to do a build before analyzing. Applying your patch reduces my bundle size by almost 1 MB! Thanks for this solution!