如何在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功能,例如代码拆分.您可以使用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