如何在运行时捆绑并加载i18n模块？

Question

我正在尝试从RequireJS迁移到Webpack,我不确定处理我们的语言环境文件的最佳方法.

目前,我们为每个语言环境生成一个单独的JS文件.这些文件包含7个以上的i18n消息模块定义以及库配置(例如时刻).例如,我们的da_DK文件类似于:

(function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../moment')) :
   typeof define === 'function' && define.amd ? define('moment-locale',['moment'], factory) :
   factory(global.moment)
}(this, function (moment) { 'use strict';


    var da = moment.defineLocale('da', {
        ...
    });

    return da;

}));

define('messages',[],function(){
  var da_messages = {
    ...
  };
  
  return da_messages;
 });

在运行时,我们确定要与我们的应用程序的其余部分一起加载的相应语言文件.我们的应用代码不知道加载了哪个区域设置; 依赖于语言环境的任何模块会做require('moment-locale')和require('messages').

我想用Webpack做类似的事情,但我还没有找到一个很好的方法来完成它.

我已经看到require.context了动态需求,但听起来最终会将所有可能的语言环境与我的应用程序捆绑在一起,我不想这样做.

我也查看了DllPlugin,认为每个语言环境文件可能是一个"dll",但我注意到dll清单包含特定的模块名称(例如:node_modules/moment/locale/de-at.js),我想我需要为了更通用,所以webpack知道我require('moment-locale')什么时候需要查看那个dll.

我能够使用它的一种方法是更新我的语言环境包生成代码,以便为每个语言环境创建一个类似于以下内容的条目:

module.exports = {
    'messages': require('messages'),
    'moment-locale': require('moment-locale'),
    ...
};

然后在webpack配置中,我将library字段设置为我的应用程序的命名空间.然后在我的应用程序的webpack配置中,我引用了这些模块externals.换句话说,当加载da_DK.js时,它会将所有模块放在window名称空间下,供应用程序在加载时引用.我宁愿不使用这种方法,但这是迄今为止我能够实现这一目标的唯一方法.

有没有其他/更好的方法来实现这一目标？

Answer 1

你可以通过多种方式解决这个问题.3种可行的方法是:

1. 打包捆绑包中的所有区域设置.
2. 使您的包延迟加载语言环境
3. 为每个区域设置单独的包

打包捆绑包中的所有区域设置

通过这种方式,您可以为较少的http请求交换较高的捆绑包大小.如果区域设置很小,这可能是要采取的路线.在所有其他情况下,我会建议反对它,因为它会使捆绑尺寸更大,并将增加负载.

使您的包延迟加载语言环境.

为此,请利用Webpacks代码拆分功能.这样您就可以创建a bundle.js,a da_DK.js,a sv_SE.js等,并根据bundle.js中的逻辑使用require()/ require.ensure加载其中一个语言环境文件.

为每个区域设置单独的包

根据您执行语言环境协商的方式,最佳方法可能是在构建时创建单个包.换句话说,创造了bundle.da_DK.js一个bundle.sv_SE.js等.如果您在加载包之前根据可用的内容进行区域设置协商(例如/da/,网址中的slug,会话设置等),这可能是最佳选择.

这样做你将a)创建尽可能小的包和b)将获得性能提升(尽管很小),因为不需要在运行时完成转换.Webpack的i18n插件将帮助您创建单独的捆绑包.

边注

Moment.js虽然它是一个非常好的库,但它并不是Webpack友好的.它将加载所有语言环境.看看这个线程来改变这种行为:https://stackoverflow.com/a/25426019/2533681