使用 webpack 将所有语言环境捆绑为一个答案

【问题标题】：All locale getting bundled into one using webpack使用 webpack 将所有语言环境捆绑为一个
【发布时间】：2020-01-22 20:27:29
【问题描述】：

在我的 react/webpack 项目中，我使用 ContextReplacementPlugin 来捆绑我需要的语言环境文件 -

var webpack = require("webpack");
module.exports = {
  // ...
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)  ]
};

此代码正确地捆绑了文件，但我唯一担心的是它捆绑了当前和将来的所有语言环境文件，我们需要支持其他国家/地区，那时捆绑的大小会不断增长。

是否有任何方法可以控制我的捆绑包大小并仅捆绑用户将使用的区域设置。

【问题讨论】：

标签： javascript node.js reactjs webpack momentjs

【解决方案1】：

您不能只捆绑用户将使用的语言环境。考虑这两个独立事件的时间线：

当您捆绑时，除了您之外，没有人知道此版本的应用程序，没有用户
当用户登录时，您可能早在他们登录之前就已经捆绑了应用程序（您必须这样做，否则，他们还登录什么？）

您需要预先捆绑任何用户可能需要使用的所有可能的语言环境，因此，如果您将使用的语言环境的子集，请捆绑这些语言环境，这样您就可以优化捆绑软件了。

至于控制包大小，我建议使用webpack-bundle-analyzer

【讨论】：