experimenting with code splitting

src/index.js

@@ -3,22 +3,47 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import { IntlProvider, addLocaleData } from 'react-intl';
-import ruData from 'react-intl/locale-data/ru';
-addLocaleData(ruData);
+const reactIntlLocaleData = {
+  zh: () => import(/* webpackChunkName: "locale_zh" */ 'react-intl/locale-data/zh'), // Chinese simplified.
+  ru: () => import(/* webpackChunkName: "locale_ru" */ 'react-intl/locale-data/ru'), // Russian.
+  en: () => import(/* webpackChunkName: "locale_en" */ 'react-intl/locale-data/en') // English, default.
+};
+
+// import enLocale from 'react-intl/locale-data/en';
+// Russian
+// import ruLocale from 'react-intl/locale-data/ru';
+// Chinese simplified.
+// import zhLocale from 'react-intl/locale-data/zh';
+// addLocaleData([...enLocale, ...ruLocale, ...zhLocale]);
+
 import allMessages from './messages.json';
-
 import TinodeWeb from './views/tinode-web.jsx';
-
 import HashNavigation from './lib/navigation.js';
 
-const {params} = HashNavigation.parseUrlHash(window.location.hash);
+// Detect human language to use in the UI:
+// Check parameters from URL hash #?hl=ru, then browser, then use 'en' as a fallback.
+const { params } = HashNavigation.parseUrlHash(window.location.hash);
 const language = (params && params.hl) ||
   (navigator.languages && navigator.languages[0]) ||
   navigator.language ||
-  navigator.userLanguage;
+  navigator.userLanguage ||
+  'en';
 
-const baseLanguage = language.toLowerCase().split(/[-_]+/)[0];
+console.log("== Got language", language);
+
+// Gets the base language 'en' from a more specific 'en_GB' or 'en-US' as a partial fallback.
+const baseLanguage = language.toLowerCase().split(/[-_]/)[0];
+
+// Dynamically load locale data for the selected language.
+const localeDataLoader =
+  reactIntlLocaleData[language] ||
+  reactIntlLocaleData[baseLanguage] ||
+  reactIntlLocaleData['en'];
+localeDataLoader().then((data) => {
+  addLocaleData(data);
+});
 
 // Try full locale, try locale without region code, fallback to 'en'
 const messages =

src/messages.json

@@ -289,7 +289,7 @@
     "action_report_contact": "Сообщить о нарушении",
     "action_report_group": "Сообщить о нарушении"
   },
-  "zh-CN": {
+  "zh": {
     "archived_contacts": "已归档联系人 ({count})",
     "contacts_not_found": "你尚无会话<br />¯∖_(ツ)_/¯",
     "full_name_prompt": "全名，例如张伟",

webpack.config.js

@@ -1,45 +1,53 @@
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const path = require('path');
 
-module.exports = {
-  entry: [
-    path.resolve(__dirname, 'src/index.js'),
-  ],
-  devtool: 'source-map',
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        loaders: [
-          'babel-loader',
-        ],
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  optimization: {
-    minimizer: [
-      // we specify a custom UglifyJsPlugin here to get source maps in production.
-      new UglifyJsPlugin({
-        cache: true,
-        parallel: true,
-        uglifyOptions: {
-          compress: true,
-          mangle: true
+module.exports = (env, argv) => {
+  const mode = argv.mode === 'production' ? 'prod' : 'dev';
+  return {
+    entry: {
+      index: path.resolve(__dirname, 'src/index.js'),
+    },
+    devtool: 'source-map',
+    module: {
+      rules: [
+        {
+          test: /\.jsx?$/,
+          loaders: [
+            'babel-loader',
+          ],
+          exclude: /node_modules/,
         },
-        sourceMap: true
-      })
-    ]
-  },
-  performance: {
-    maxEntrypointSize: 280000,
-    maxAssetSize: 280000
-  },
-  externals: {
-    'react': 'React',
-    'react-dom': 'ReactDOM',
-    'react-intl': 'ReactIntl',
-    'firebase/app': 'firebase',
-    'firebase/messaging': ['firebase', 'messaging']
-  },
-};
+      ],
+    },
+    output: {
+      path: path.resolve(__dirname, 'umd'),
+      filename: `[name].${mode}.js`,
+      publicPath: '/umd/'
+    },
+    optimization: {
+      minimizer: [
+        // we specify a custom UglifyJsPlugin here to get source maps in production.
+        new UglifyJsPlugin({
+          cache: true,
+          parallel: true,
+          uglifyOptions: {
+            compress: true,
+            mangle: true
+          },
+          sourceMap: true
+        })
+      ]
+    },
+    performance: {
+      maxEntrypointSize: 250000,
+      maxAssetSize: 250000
+    },
+    externals: {
+      'react': 'React',
+      'react-dom': 'ReactDOM',
+      'react-intl': 'ReactIntl',
+      'firebase/app': 'firebase',
+      'firebase/messaging': ['firebase', 'messaging']
+    },
+  };
+}