相关疑难解决方法(0)

如何在React中延迟加载js文件(对于多语言应用程序)

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

我看到它的方式是为每种语言都有一个js文件,例如:

en.js:

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

    navHome: 'Home',
    navUsers: 'Users',
    ...
};
Run Code Online (Sandbox Code Playgroud)

fr.js:

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

    navHome: 'Accueil',
    navUsers: 'Utilisateurs',
    ...
};
Run Code Online (Sandbox Code Playgroud)

由于每个语言文件都很大,并且可能支持几十种不同的语言,我宁愿只下载正确的文件,具体取决于所选择的语言,以便最大限度地减少加载时间(和带宽使用).

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

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

    ...
Run Code Online (Sandbox Code Playgroud)

和一些用户控制在fr和之间切换这个变量en.

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

javascript multilingual lazy-loading reactjs webpack

4
推荐指数
1
解决办法
1089
查看次数