diff --git a/client/.babelrc b/client/.babelrc index 9c442fbe77..a920248a91 100644 --- a/client/.babelrc +++ b/client/.babelrc @@ -22,6 +22,7 @@ ] ], "plugins": [ + "preval", [ "@babel/plugin-proposal-class-properties", { diff --git a/client/i18n/config.js b/client/i18n/config.js index eb10c3b87b..676e06215b 100644 --- a/client/i18n/config.js +++ b/client/i18n/config.js @@ -1,3 +1,5 @@ +/* global preval */ + import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; @@ -12,20 +14,53 @@ i18n.use(initReactI18next).init({ fallbackLng: 'en', lng: i18nextCode, // we only load one language since each language will have it's own server + // They need to be evaluated ahead of time, to prevent Webpack from bundling + // the entire locales directory. To avoid double imports when the locale is + // english, we simply export nothing from the preval resources: { [i18nextCode]: { - translations: require(`./locales/${clientLocale}/translations.json`), - trending: require(`./locales/${clientLocale}/trending.json`), - intro: require(`./locales/${clientLocale}/intro.json`), - metaTags: require(`./locales/${clientLocale}/meta-tags.json`), - links: require(`./locales/${clientLocale}/links.json`) + translations: preval` + const envData = require('../../config/env.json'); + const { clientLocale } = envData; + if (clientLocale !== 'english') { + module.exports = require('./locales/' + clientLocale + '/translations.json'); + } + `, + trending: preval` + const envData = require('../../config/env.json'); + const { clientLocale } = envData; + if (clientLocale !== 'english') { + module.exports = require('./locales/' + clientLocale + '/trending.json'); + } + `, + intro: preval` + const envData = require('../../config/env.json'); + const { clientLocale } = envData; + if (clientLocale !== 'english') { + module.exports = require('./locales/' + clientLocale + '/intro.json'); + } + `, + metaTags: preval` + const envData = require('../../config/env.json'); + const { clientLocale } = envData; + if (clientLocale !== 'english') { + module.exports = require('./locales/' + clientLocale + '/meta-tags.json'); + } + `, + links: preval` + const envData = require('../../config/env.json'); + const { clientLocale } = envData; + if (clientLocale !== 'english') { + module.exports = require('./locales/' + clientLocale + '/links.json'); + } + ` }, en: { - translations: require('./locales/english/translations.json'), - trending: require('./locales/english/trending.json'), - intro: require('./locales/english/intro.json'), - metaTags: require('./locales/english/meta-tags.json'), - links: require('./locales/english/links.json') + translations: preval`module.exports = require('./locales/english/translations.json')`, + trending: preval`module.exports = require('./locales/english/trending.json')`, + intro: preval`module.exports = require('./locales/english/intro.json')`, + metaTags: preval`module.exports = require('./locales/english/meta-tags.json')`, + links: preval`module.exports = require('./locales/english/links.json')` } }, ns: ['translations', 'trending', 'intro', 'metaTags', 'links'], diff --git a/client/package-lock.json b/client/package-lock.json index 1d1723663f..4c4fd64980 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -5419,6 +5419,16 @@ "@babel/helper-define-polyfill-provider": "^0.2.0" } }, + "babel-plugin-preval": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/babel-plugin-preval/-/babel-plugin-preval-5.0.0.tgz", + "integrity": "sha512-8DqJq6/LPUjSZ0Qq6bVIFpsj2flCEE0Cbnbut9TvGU6jP9g3dOWEXtQ/sdvsA9d6souza8eNGh04WRXpuH9ThA==", + "requires": { + "@babel/runtime": "^7.9.2", + "babel-plugin-macros": "^2.8.0", + "require-from-string": "^2.0.2" + } + }, "babel-plugin-prismjs": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/babel-plugin-prismjs/-/babel-plugin-prismjs-2.0.1.tgz", diff --git a/client/package.json b/client/package.json index fb4a7529b1..37f89b527c 100644 --- a/client/package.json +++ b/client/package.json @@ -55,6 +55,7 @@ "algoliasearch": "4.9.1", "assert": "2.0.0", "axios": "0.21.1", + "babel-plugin-preval": "5.0.0", "babel-plugin-prismjs": "2.0.1", "bezier-easing": "2.1.0", "browser-cookies": "1.2.0", diff --git a/client/src/utils/get-words.js b/client/src/utils/get-words.js index 9d94249855..c97cdd3be3 100644 --- a/client/src/utils/get-words.js +++ b/client/src/utils/get-words.js @@ -1,6 +1,15 @@ -const config = require('../../../config/env.json'); +/* global preval */ -const words = require(`../../i18n/locales/${config.clientLocale}/motivation.json`); +// this lets us do dynamic work ahead of time, inlining motivation.json, so +// that Webpack will never try to include locales that we know are not used. + +const words = preval` + const config = require('../../../config/env.json'); + const { clientLocale } = config; + const target = '../../i18n/locales/' + clientLocale + '/motivation.json'; + const words = require(target); + module.exports = words; +`; function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)];