javascript - 为什么 moment-timezone 在 webpack 4 和/或 create react app 4 中使用的空间要少得多？

Question

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

1. 此插件对总包大小没有影响
2. 分析bundle，moment-timezone只需要7k左右

据我所知，moment-timezone 在我的应用程序中运行正常，所以我很困惑。

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

Answer 1

很抱歉这不是答案，但希望它能节省一些时间。

MomentJS 已经意识到他们的规模有一段时间了，并已采取措施尝试构建他们的项目，以便更好地剥离它。他们已经构建了他们的项目，因此语言环境是分开存储的。

但是这里的技巧是你提到了 CreateReact4，你没有在干净的房间里测试它，所以任何东西都可能生效。

创建 React 4 文档:

Troubleshooting.md - MomentJS Locales are Missing

If you use a Moment.js, you might notice that only the English localeis available by default. This is because the locale files are large,and you probably only need a subset of all the locales provided byMoment.js.

To add a specific Moment.js locale to your bundle, you need to importit explicitly.

这是因为 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$/,
  }),

您可以使用您在问题中提到的插件进一步 trim 它(您是否检查过它是否甚至被调用/兼容？)，但大部分 gzip 数据实际上是语言环境，而不是时区数据， (TZ 不会轻易压缩)。

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。