diff options
author | Sebastian <sebasjm@gmail.com> | 2021-08-23 16:46:06 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-08-23 16:48:30 -0300 |
commit | 38acabfa6089ab8ac469c12b5f55022fb96935e5 (patch) | |
tree | 453dbf70000cc5e338b06201af1eaca8343f8f73 /date-fns/docs/webpack.md | |
parent | f26125e039143b92dc0d84e7775f508ab0cdcaa8 (diff) | |
download | node-vendor-master.tar.gz node-vendor-master.tar.bz2 node-vendor-master.zip |
Diffstat (limited to 'date-fns/docs/webpack.md')
-rw-r--r-- | date-fns/docs/webpack.md | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/date-fns/docs/webpack.md b/date-fns/docs/webpack.md new file mode 100644 index 0000000..9eb1c10 --- /dev/null +++ b/date-fns/docs/webpack.md @@ -0,0 +1,48 @@ +# webpack + +## Removing unused languages from dynamic import + +If a locale is imported dynamically, then all locales from date-fns are loaded by webpack into a bundle (~160kb) or split across the chunks. This prolongs the build process and increases the amount of space taken. However, it is possible to use webpack to trim down languages using [ContextReplacementPlugin]. + +Let's assume that we have a single point in which supported locales are present: + +`config.js`: + +```js +// `see date-fns/src/locale` for available locales +export const supportedLocales = ['en-US', 'de', 'pl', 'it'] +``` + +We could also have a function that formats the date: + +```js +const getLocale = (locale) => import(`date-fns/locale/${locale}/index.js`) // or require() if using CommonJS + +const formatDate = (date, formatStyle, locale) => { + return format(date, formatStyle, { + locale: getLocale(locale), + }) +} +``` + +In order to exclude unused languages we can use webpacks [ContextReplacementPlugin]. + +`webpack.config.js`: + +```js +import webpack from 'webpack' +import { supportedLocales } from './config.js' + +export default const config = { + plugins: [ + new webpack.ContextReplacementPlugin( + /date\-fns[\/\\]/, + new RegExp(`[/\\\\\](${supportedLocales.join('|')})[/\\\\\]index\.js$`) + ) + ] +} +``` + +This results in a language bundle of ~23kb . + +[contextreplacementplugin]: https://webpack.js.org/plugins/context-replacement-plugin/ |