Include info on how to tree shake dynamically imported locales

If locale is required dynamically all languages in the date-fns are loaded into bundle (~160kb). However it is possible to use webpack to trim down the languages added to bundle using Context replacement plugin.

Usage example

const getLocale = (locale) => require(`date-fns/locale/${locale}/index.js`);

const formatDate = (date, formatStyle, locale) => {
    return format(date, formatStyle, {
        locale: getLocale(locale)
    });
};

Config example:

const supportedLocales = ["en", "de", "pl", "it"]
plugins: [
  new ContextReplacementPlugin(/date\-fns[\/\\]/, new RegExp(`[/\\\\\](${supportedLocales.join('|')})[/\\\\\]`)),
]

This results in a language bundle of ~23kb.

[andrew-yangy]

Tree shaking and lazy loading are different terms. Tree shaking is to exclude the unused files or scripts, I think what you are trying here is webpack code splitting, which can be done by dynamic import(from wepack v2). It will generate a separate chunk file which can be requested lazily, it’s a common use case for i18n. https://webpack.js.org/guides/code-splitting/#dynamic-imports

[stevemao]

Once again - the reason I suggested to include this case is because for long time I was hesitating to move from moment.js to date-fns since I wasn’t sure if I can load only languages I need without the need to specifically define this in each place of use. There was no documentation on that (apart from, “do it yourself and include everything by hand”) which is why I want to save that pain to others.

This feels like a webpack config tip which has nothing to do with moment.js or date-fns…

I’m not sure what you want to add to the docs but if you submit a PR we can have a look!