Support for dynamically loading language packs.

Load the `lodash` function as needed.
Added i18n related configuration.

src/layouts/index.js

@@ -1,25 +1,70 @@
-import React, { PureComponent } from 'react'
+import React, { Component } from 'react'
 import withRouter from 'umi/withRouter'
 import { LocaleProvider } from 'antd'
 import { I18nProvider } from '@lingui/react'
-import { catalogs, langFromPath } from 'utils/i18n'
+import { langFromPath, defaultLanguage } from 'utils'
 import zh_CN from 'antd/lib/locale-provider/zh_CN'
 import en_US from 'antd/lib/locale-provider/en_US'
+
 import BaseLayout from './BaseLayout'
 
 const languages = {
   zh: zh_CN,
   en: en_US,
 }
+
 @withRouter
-class Layout extends PureComponent {
+class Layout extends Component {
+  state = {
+    catalogs: {},
+  }
+
+  language = defaultLanguage
+
+  componentDidMount() {
+    const language = langFromPath(this.props.location.pathname)
+    this.language = language
+    this.loadCatalog(language)
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const language = langFromPath(nextProps.location.pathname)
+    const preLanguage = this.language
+    const { catalogs } = nextState
+
+    if (preLanguage !== language && !catalogs[language]) {
+      this.loadCatalog(language)
+      this.language = language
+      return false
+    }
+    this.language = language
+
+    return true
+  }
+
+  loadCatalog = async language => {
+    const catalog = await import(/* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
+    `@lingui/loader!../locales/${language}/messages.json`)
+
+    this.setState(state => ({
+      catalogs: {
+        ...state.catalogs,
+        [language]: catalog,
+      },
+    }))
+  }
+
   render() {
     const { location, children } = this.props
-    const lang = langFromPath(location.pathname)
+    const { catalogs } = this.state
+
+    let language = langFromPath(location.pathname)
+    // If the language pack is not loaded or is loading, use the default language
+    if (!catalogs[language]) language = defaultLanguage
 
     return (
-      <LocaleProvider locale={languages[lang]}>
-        <I18nProvider language={lang} catalogs={catalogs}>
+      <LocaleProvider locale={languages[language]}>
+        <I18nProvider language={language} catalogs={catalogs}>
           <BaseLayout>{children}</BaseLayout>
         </I18nProvider>
       </LocaleProvider>

src/utils/config.js

@@ -6,6 +6,8 @@ module.exports = {
   logoPath: '/logo.svg',
   apiPrefix: '/api/v1',
   openPages: ['/login'],
+
+  /* Layout configuration, specify which layout to use for route. */
   layouts: [
     {
       name: 'primary',
@@ -13,4 +15,10 @@ module.exports = {
       exlude: [/(\/(en|zh))*\/login/],
     },
   ],
+
+  /* I18n configuration, `languages` and `defaultLanguage` are required currently. */
+  i18n: {
+    languages: ['en', 'zh'],
+    defaultLanguage: 'en',
+  },
 }

src/utils/i18n.js

@@ -1,42 +0,0 @@
-const catalogs = {
-  en: { messages: require('../locales/en/messages.json') },
-  zh: { messages: require('../locales/zh/messages.json') },
-}
-
-const defaultLanguage = 'en'
-
-const languages = []
-for (const key in catalogs) {
-  languages.push(key)
-}
-
-/**
- * Remove the language prefix in pathname.
- * @param   {string}    pathname   Remove the language prefix in pathname.
- * @return  {string}    Return the pathname after removing the language prefix.
- */
-const deLangPrefix = pathname => {
-  for (const item of languages) {
-    if (pathname.startsWith(`/${item}/`)) {
-      return pathname.replace(`/${item}/`, '/')
-    }
-  }
-
-  return pathname
-}
-
-/**
- * Query language from pathname.
- * @param   {string}    pathname   Pathname to be queried.
- * @return  {string}    Return the queryed language.
- */
-const langFromPath = pathname => {
-  for (const item of languages) {
-    if (pathname.startsWith(`/${item}/`)) {
-      return item
-    }
-  }
-  return defaultLanguage
-}
-
-export { languages, catalogs, langFromPath, deLangPrefix, defaultLanguage }

src/utils/index.js

@@ -1,10 +1,13 @@
-import cloneDeep from 'lodash.clonedeep'
+import { cloneDeep, curry } from 'lodash'
+import { i18n } from './config'
 
 export classnames from 'classnames'
 export config from './config'
 export request from './request'
 export { Color } from './theme'
 
+const { languages, defaultLanguage } = i18n
+
 /**
  * Query objects that specify keys and values in an array where all values are objects.
  * @param   {array}         array   An array where all values are objects, like [{key:1},{key:2}].
@@ -56,3 +59,41 @@ export function arrayToTree(
   })
   return result
 }
+
+const langFromPath = curry(
+  /**
+   * Query language from pathname.
+   * @param   {string}    languages         Specify which languages are currently available.
+   * @param   {string}    defaultLanguage   Specify the default language.
+   * @param   {string}    pathname          Pathname to be queried.
+   * @return  {string}    Return the queryed language.
+   */
+  (languages, defaultLanguage, pathname) => {
+    for (const item of languages) {
+      if (pathname.startsWith(`/${item}/`)) {
+        return item
+      }
+    }
+    return defaultLanguage
+  }
+)(languages)(defaultLanguage)
+
+const deLangPrefix = curry(
+  /**
+   * Remove the language prefix in pathname.
+   * @param   {array}     languages  Specify which languages are currently available.
+   * @param   {string}    pathname   Remove the language prefix in pathname.
+   * @return  {string}    Return the pathname after removing the language prefix.
+   */
+  (languages, pathname) => {
+    for (const item of languages) {
+      if (pathname.startsWith(`/${item}/`)) {
+        return pathname.replace(`/${item}/`, '/')
+      }
+    }
+
+    return pathname
+  }
+)(languages)
+
+export { langFromPath, deLangPrefix, defaultLanguage }

src/utils/request.js

@@ -1,6 +1,5 @@
 import axios from 'axios'
-import cloneDeep from 'lodash.clonedeep'
-import isEmpty from 'lodash.isempty'
+import { cloneDeep, isEmpty } from 'lodash'
 import pathToRegexp from 'path-to-regexp'
 import { message } from 'antd'
 import qs from 'qs'