JavaScript中的条件导入或替代（ReactJS WebApp）？

Question

我正在为ReactJS webapp实现国际化。 如何避免加载所有语言文件？

import ru from './ru';
import en from './en';

// next lines are not important for this question from here
import locale from 'locale';
const supported = new locale.Locales(["en", "ru"])

let language = 'ru';

const acceptableLanguages = {
    ru: ru,
    en: en,
}
if (typeof window !== 'undefined') {
    const browserLanguage = window.navigator.userLanguage || window.navigator.language;
    const locales = new locale.Locales(browserLanguage)
    language = locales.best(supported).code
}

// till here

// and here i'm returning a static object, containing all language variables
const chooseLang = () => {
    return acceptableLanguages[language];
}
const lang = chooseLang();

export default lang;

Answer 1

遗憾的是，无法在ES6中动态加载模块。

即将推出的HTML Loader Spec将允许此功能，因此您可以使用polyfill来使用它。

const chooseLang = () => System.import(`./${language}`);
export default chooseLang;

但是，现在这将是基于承诺的，因此需要像这样调用它：

import language from "./language";
language.chooseLang().then(l => {
    console.log(l);
});

但请记住，规范可能会彻底改变（或完全丢弃）。

另一种选择是不将本地化存储为Javascript模块，而是将其作为JSON存储，例如

en.json

{ "hello_string": "Hi!" }

language.js

const chooseLang = () => {
    return fetch(`./${language}.json`)
        .then(response => response.json());
};

同样，这将是基于承诺的，因此需要如此访问：

import language from "./language";
language.chooseLang().then(l => {
    console.log(l.hello_string);
});

该解决方案完全符合ES6标准，不会依赖未来可能的功能。

Answer 2

看起来我迟到了，但我想回答我正在使用的方法。 我有一个异步组件：

import React from 'react';

export default (loader, collection) => (
  class AsyncComponent extends React.Component {
    constructor(props) {
      super(props);
      this.Component = null;
      this.state = { Component: AsyncComponent.Component };
    }

    componentWillMount() {
      if (!this.state.Component) {
        loader().then((Component) => {
          AsyncComponent.Component = Component;
          this.setState({ Component });

        });
      }
    }

    render() {
      if (this.state.Component) {
        return (
          <this.state.Component { ...this.props } { ...collection } />
        )
      }

      return null;
    }
  }
);

我们称之为：

const page1 = asyncComponent(() => import('./page1')
  .then(module => module.default), { name: 'page1' });

然后我们用它：

  <Route path='/page1' component= {page1}/>

这将确保动态完成加载。

Answer 3

看一下react-loadable包 - 如果你能以某种方式将语言文件封装到组件中，这可能会解决你的问题。