如何在 React 中延迟加载 js 文件（针对多语言应用程序）

Question

我想用 React 创建一个多语言应用程序。

我的看法是每种语言都有一个 js 文件，例如：

en.js:

module.exports = {
    langEnglish: 'English',
    langFrench: 'French',

    navHome: 'Home',
    navUsers: 'Users',
    ...
};

fr.js:

module.exports = {
    langEnglish: 'Anglais',
    langFrench: 'Français',

    navHome: 'Accueil',
    navUsers: 'Utilisateurs',
    ...
};

由于每个语言文件都非常大并且可能支持几十种不同的语言，我宁愿只下载正确的文件以根据所选语言使用，以最大限度地减少加载时间（和带宽使用） .

例如我可以在应用程序状态中有一个变量

var App = React.createClass({
    getInitialState: function () {
        return {
            lang: 'en'
        };
    },

    ...

和一些用户控件在 fr 和 en 之间切换此变量。

是否可以在初始加载时仅加载 en.js 文件，如果用户将语言切换为法语，则加载并使用 fr.js 文件，以此类推每种语言？

Answer 1

使用一些高级 webpack features, such as code splitting. You can use webpacks require.ensure 来异步加载文件。

创建文件：

i18n.js

var currentTranslation = {};

module.exports = {
    getTranslation: function() {
        return currentTranslation;
    },

    loadI18n: function(region, cb) {
        switch (region) {
            case 'en':
                require.ensure([], function(require) {
                    cb(currentTranslation = require('./en'));
                }, 'i18n-en'); // will create a chunk named 'i18n-en'
                break;
            case 'fr':
                require.ensure([], function(require) {
                    cb(currentTranslation = require('./fr'));
                }, 'i18n-fr'); // will create a chunk named 'i18n-fr'
                break;
            default:
                require.ensure([], function(require) {
                    cb(currentTranslation = require('./en'));
                }, 'i18n-en');
        }
    }
}

App.js

var i18n = require('./i18n');

以及何时需要异步加载翻译字符串

您可以拨打：

i18n.loadI18n('en', function(texts) {
    console.log(texts);
});

一旦 webpack 加载该块，您将能够使用函数

获取翻译文本

var texts = i18n.getTranslation(); // call this from anywhere and it will return english texts

如果你想切换语言，只需调用

i18n.loadI18n('fr', function(texts) {
    console.log(texts);
});

var texts = i18n.getTranslation(); // will return french texts

如何在 React 中延迟加载 js 文件（针对多语言应用程序）

How to lazy load a js file in React (for a multilingual app)

javascript

multilingual

lazy-loading

reactjs

webpack

i18n.js

App.js