Reduce Bundle size

package.json

@@ -51,7 +51,8 @@
     "react-router": "^3.2.1",
     "serve-favicon": "^2.3.0",
     "swagger-ui": "~3.17.3",
-    "webpack": "^4.16.5"
+    "webpack": "^4.16.5",
+    "webpack-cli": "^3.1.0"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.6",
@@ -65,7 +66,6 @@
     "react-transform-hmr": "^1.0.4",
     "should": "^13.2.3",
     "watai": "^0.7.0",
-    "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.5",
     "webpack-error-notification": "^0.1.8"
   },

src/components/formula.jsx

@@ -4,7 +4,7 @@ import { parameterShape, variableShape } from '../openfisca-proptypes'
 import { Link } from 'react-router'
 import { FormattedMessage, FormattedDate } from 'react-intl'
 import { flatten, pipe, map, is } from 'ramda'
-import Highlight from 'react-highlight'
+import Highlight from 'react-highlight/lib/optimized'
 
 class Formula extends React.Component {
 
@@ -32,7 +32,7 @@ class Formula extends React.Component {
             />
           </h3>
         }
-        <Highlight className="python">{this.renderLinkedFormula(content)}</Highlight>
+        <Highlight languages={['python']} className="python">{this.renderLinkedFormula(content)}</Highlight>
         <p>
           <a href={source} rel="noopener" target="_blank"><FormattedMessage id="editThisFormula"/></a>
         </p>

src/server/lang.js

@@ -1,32 +1,27 @@
 import config from '../config'
 
 import acceptLanguage from 'accept-language'
+import {fromPairs} from 'ramda'
 
 import path from 'path'
-import {readdir} from 'fs'
+import {readdirSync} from 'fs'
 
 
 const DEFAULT_LANGUAGE = 'en'
 
 
 export function loadTranslations(langDir) {
-  var messages = {}
-  readdir(langDir, (err, files) => {
-    if (err) {
-      throw new Error("Unable to load translation files from '" + langDir + "' directory. See following error for more information: " + err)
-    }
-
-    files.forEach(file => {
-      messages[path.basename(file, '.json')] = require(path.resolve(langDir, file))
+  return fromPairs(
+    readdirSync(langDir).map(file => {
+      const lang = path.basename(file, '.json')
+      const messages = Object.assign(
+        {},
+        require(path.resolve(langDir, file)),
+        config.ui[lang]  // load all config-provided locale strings
+      )
+      return [lang, messages]
     })
-
-    // load all config-provided locale strings
-    Object.keys(messages).forEach(lang => {
-      Object.assign(messages[lang], config.ui[lang])
-    })
-  })
-
-  return messages
+  )
 }
 
 

webpack.config.prod.babel.js

@@ -5,9 +5,11 @@ import webpack from 'webpack'
 
 import config from './src/config'
 import writeAssets from './src/server/write-assets'
+import { loadTranslations } from './src/server/lang'
 
 
 const assetsPath = path.join(__dirname, 'public')
+const supportedLanguages = Object.keys(loadTranslations(path.join(__dirname, './src/assets/lang/')))
 
 module.exports = {
   // devtool: "eval", // Transformed code
@@ -63,6 +65,18 @@ module.exports = {
       {from: 'node_modules/swagger-ui/dist/swagger-ui.css', to: '.'},
     ]),
 
+    // Only load syntax highlighting for Python
+    new webpack.ContextReplacementPlugin(
+      /highlight\.js\/lib\/languages$/,
+      new RegExp('^./(python)$')
+    ),
+
+    // Only load locale for supported languages
+    new webpack.ContextReplacementPlugin(
+      /react-intl\/locale-data$/,
+      new RegExp(`^./(${supportedLanguages.join('|')})$`)
+    ),
+
     function() { this.plugin('done', writeAssets(path.resolve(__dirname, 'webpack-assets.json')).bind(this)) },
   ],
 }