From 97226a0670063b579215e7b44987f3957842c5df Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 16 May 2017 23:56:42 +0100 Subject: [PATCH 1/2] Ignore Moment.js locales by default --- .../config/webpack.config.dev.js | 6 +++++ .../config/webpack.config.prod.js | 6 +++++ packages/react-scripts/template/README.md | 27 +++++++++++++++++++ 3 files changed, 39 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 98e57ea9e5b..f90ca6bd09e 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -252,6 +252,12 @@ module.exports = { // makes the discovery automatic so you don't have to restart. // See https://github.com/facebookincubator/create-react-app/issues/186 new WatchMissingNodeModulesPlugin(paths.appNodeModules), + // Moment.js is an extremely popular library that bundles large locale files + // by default due to how Webpack interprets its code. This is a practical + // solution that requires the user to opt into importing specific locales. + // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack + // You can remove this if you don't use Moment.js: + new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), ], // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 7615894a755..182105c756a 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -286,6 +286,12 @@ module.exports = { new ManifestPlugin({ fileName: 'asset-manifest.json', }), + // Moment.js is an extremely popular library that bundles large locale files + // by default due to how Webpack interprets its code. This is a practical + // solution that requires the user to opt into importing specific locales. + // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack + // You can remove this if you don't use Moment.js: + new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), ], // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c178e573816..b5c6bfe7ca8 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -81,6 +81,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra) - [`npm run build` silently fails](#npm-run-build-silently-fails) - [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku) + - [Moment.js locales are missing](#momentjs-locales-are-missing) - [Something Missing?](#something-missing) ## Updating to New Releases @@ -1616,6 +1617,32 @@ It is reported that `npm run build` can fail on machines with no swap space, whi This may be a problem with case sensitive filenames. Please refer to [this section](#resolving-heroku-deployment-errors). +### Moment.js locales are missing + +If you use a [Moment.js](https://momentjs.com/), you might notice that by default only the English locale is bundled by default. This is because the locale files are large, and you probably only need a subset of [locales provided by Moment.js](https://momentjs.com/#multiple-locale-support). + +To add a Moment.js locale to your bundle, you need to import it explicitly.
+For example: + +```js +import moment from 'moment'; +import 'moment/locale/fr'; +``` + +If import multiple locales this way, you can later switch between them by calling `moment.locale()` with the name, for example: + +```js +import moment from 'moment'; +import 'moment/locale/fr'; +import 'moment/locale/es'; + +// ... + +moment.locale('fr'); +``` + +This will only work for locales that have been explicitly imported before. + ## Something Missing? If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md) From 485456ac32312e33a3302caa79ef395b9886170b Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 16 May 2017 23:59:18 +0100 Subject: [PATCH 2/2] Update README.md --- packages/react-scripts/template/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index b5c6bfe7ca8..b25f723c97b 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1619,9 +1619,9 @@ Please refer to [this section](#resolving-heroku-deployment-errors). ### Moment.js locales are missing -If you use a [Moment.js](https://momentjs.com/), you might notice that by default only the English locale is bundled by default. This is because the locale files are large, and you probably only need a subset of [locales provided by Moment.js](https://momentjs.com/#multiple-locale-support). +If you use a [Moment.js](https://momentjs.com/), you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of [all the locales provided by Moment.js](https://momentjs.com/#multiple-locale-support). -To add a Moment.js locale to your bundle, you need to import it explicitly.
+To add a specific Moment.js locale to your bundle, you need to import it explicitly.
For example: ```js @@ -1629,7 +1629,7 @@ import moment from 'moment'; import 'moment/locale/fr'; ``` -If import multiple locales this way, you can later switch between them by calling `moment.locale()` with the name, for example: +If import multiple locales this way, you can later switch between them by calling `moment.locale()` with the locale name: ```js import moment from 'moment';