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';
+const reactIntlLocaleData = {
-addLocaleData(ruData);
+  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';
 
+// 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,10 +1,12 @@
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const path = require('path');
 
-module.exports = {
+module.exports = (env, argv) => {
-  entry: [
+  const mode = argv.mode === 'production' ? 'prod' : 'dev';
-    path.resolve(__dirname, 'src/index.js'),
+  return {
-  ],
+    entry: {
+      index: path.resolve(__dirname, 'src/index.js'),
+    },
     devtool: 'source-map',
     module: {
       rules: [
@@ -17,6 +19,11 @@ module.exports = {
         },
       ],
     },
+    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.
@@ -32,8 +39,8 @@ module.exports = {
       ]
     },
     performance: {
-    maxEntrypointSize: 280000,
+      maxEntrypointSize: 250000,
-    maxAssetSize: 280000
+      maxAssetSize: 250000
     },
     externals: {
       'react': 'React',
@@ -43,3 +50,4 @@ module.exports = {
       'firebase/messaging': ['firebase', 'messaging']
     },
   };
+}