Как лениво загрузить js-файл в React (для многоязычного приложения)

Я хотел бы создать многоязычное приложение с React.

Как я вижу, это будет иметь файл js для каждого языка, например:

Эн.js: 

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

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

О.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 вместо этого и так далее для каждого языка?

1 4
javascript reactjs webpack multilingual lazy-loading

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');
        }
    }
}

Приложение.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
6