3

在 webpack 3 中，我使用了 moment-timezone-data-webpack-plugin来减小我的包大小并且效果很好。测试表明它显着减小了捆绑包的大小。我现在已经升级到 webpack 4 和 create-react-app 4，看起来像

  1. 这个插件对总包大小没有影响
  2. 分析捆绑包，moment-timezone 只需要大约 7k

据我所知，时刻时区在我的应用程序中运行正常，所以我很困惑。

Webpack 4 在减少包大小方面要好得多，但它无法知道我的应用程序需要哪些时区数据是运行时数据，所以我无法想象这如何成为答案的一部分。

4

3 回答 3

2

我相信在升级时刻时区的过程中，你已经从一个有时区数据变成了一个没有时区数据。

https://momentjs.com/timezone/声明（缩小的）没有数据的时刻时区只有 2.8k

加载未缩小版本：https ://momentjs.com/downloads/moment-timezone.js并查看我的浏览器网络选项卡，显示它的时钟频率约为 5.2k

这是我的假设（没有额外的信息/测试和重新创建你的 webpack）这可能是罪魁祸首。

“但我的网络应用程序似乎正在运行”我听到你哭了。

moment-timezone回退到（新的）本机浏览器 API，尝试在旧浏览器中进行测试：

如果您不需要支持旧项目/浏览器，请考虑Luxon。

于 2021-08-12T09:22:01.477 回答
2

抱歉，这是一个非答案，但希望它可以节省一些时间。

MomentJS 已经意识到它们的规模有一段时间了，并已采取措施尝试构建他们的项目，以便更好地精简它。他们已经构建了他们的项目，以便单独存储语言环境。

但是这里的技巧是您提到了 CreateReact4，您不是在洁净室中测试它，所以任何事情都可能生效。

创建 React 4 文档：

Troubleshooting.md - MomentJS 语言环境丢失

如果您使用 Moment.js，您可能会注意到默认情况下只有英语语言环境可用。这是因为语言环境文件很大，您可能只需要 Moment.js 提供的所有语言环境的一个子集。

要将特定的 Moment.js 语言环境添加到您的包中，您需要显式导入它。

这是因为 CreateReact4 默认配置为删除语言环境

react-scripts/config/webpack.config.js#L671-L678

  // Moment.js is an extremely popular library that bundles large locale files
  // by default due to how webpack interprets its code. This is a practical
  // solution that requires the user to opt into importing specific locales.
  // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
  // You can remove this if you don't use Moment.js:
  new webpack.IgnorePlugin({
    resourceRegExp: /^\.\/locale$/,
    contextRegExp: /moment$/,
  }),

您可以使用问题中提到的插件进一步修剪它（您是否检查过它是否甚至被调用/兼容？），但大部分 gzip 压缩数据确实是语言环境，而不是时区数据，（TZ don不要轻易压缩）。

Moment TZ Data Plugin在其站点上的状态取决于配置可以节省各种费用。

Default                 1164 KiB        105 KiB
Strip locales           959 KiB (~82%)  56 KiB (~53%)
Strip tz data           265 KiB (~23%)  69 KiB (~66%)
Strip locales & tz data 60 KiB (~5%)    20 KiB (~19%)

因此 CreateReact4 剥离不需要的语言环境的默认行为，默认情况下可能会减少 53%（gzipped）。

但是，您声明 Moment-js 正在使用 7k ......所以虽然这是对可能发生的事情的一个很好的细分，但显然还有一些事情在起作用，即使 moment.js-min 是 18kb。

于 2021-08-12T09:09:12.977 回答
-1

前段时间使用 webpack2 时，我也有同样的感觉。

根据我的经验，答案是：本地化字符串。之前 - 它带走了所有这些，并且知道它们以某种方式受到限制。

于 2021-08-10T14:04:44.940 回答