如何在React中延迟加载js文件（对于多语言应用程序） [英] How to lazy load a js file in React (for a multilingual app)

问题描述

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

I would like to create a multilingual app with React.

我看到它的方式是为每种语言提供一个js文件，例如：

The way I see it would be to have a js file for each language, for example :

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',
    ...
};

由于每个语言文件都很大，可能会支持几十种不同的语言，我更愿意根据所选语言下载仅使用的正确文件，以便最大限度地减少加载时间（和带宽使用）。

As each language file will be quite big and there could be dozens of different languages supported, I would prefer to download only the correct file to use depending on the language chosen in order to minimize loading time (and bandwidth usage).

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

For example I could have a variable in the app state

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

    ...

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

and some user control to switch this variable between fr and en.

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

Is it possible to load only the en.js file on the initial load, and if the user switches the language to French then load and use the fr.js file instead and so on for each language?

推荐答案

使用一些高级 webpack 功能，例如代码拆分。您可以使用webpacks require.ensure 用于异步加载文件。

Make use of some advanced webpack features, such as code splitting. You can use webpacks require.ensure for async loading your files.

创建文件：

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

App.js

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

当你需要翻译字符串加载异步时

and when you need the translation strings to be loaded async

你可以致电：

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

一旦webpack加载了这个块，你就可以使用函数

once webpack loads that chunk, you will be able to get the translation texts using the function

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

如果你想切换语言，只需要打电话

if you want to switch language, just call

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

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

这篇关于如何在React中延迟加载js文件（对于多语言应用程序）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！