fix: prevent excessive locale bundling (#41979)

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

client/.babelrc

@@ -22,6 +22,7 @@
     ]
   ],
   "plugins": [
+    "preval",
     [
       "@babel/plugin-proposal-class-properties",
       {

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'],

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",

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",

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)];