process.env.NODE_ENV 检查是如何从 ReactJS 生产构建中移除的？

Question

我知道 ReactJS 将 __DEV__ 转换为 "production" !== process.env.NODE_ENV - like this。我在某处看到它根据环境直接转换为布尔值，但这是另一个令人困惑的地方。

不过，我想知道具体的 babel-plugin/process/packages 实际上 从生产 React (react.min.js) 中删除了 这个条件，因为没有这样的条件在该文件中。

据我了解，这是一个两步过程：

How/where后者实现了吗？

Answer 1

当JS被丑化（缩小）时，代码被删除。

UglifyJS2 has an option dead_code“删除[s]无法访问的代码。”

至于如何这是有效的，这里的逻辑相当复杂，但起点是 Uglify 的 eliminate_dead_code function。

Answer 2

ReactJS 使用 Webpack 捆绑其生产代码。
Webpack 有一个名为 DefinePlugin, which ReactJS uses 的插件。此插件替换代码中的文字值，您可以控制的值。与编译器内联非常相似。

要么我不知道这个插件的名字，要么它只是一个糟糕的选择。在我试图找出 ReactJS 如何清理其生产代码的研究中，我不止一次浏览了 new webpack.DefinePlugin() 调用。此外，我缺乏使用 Webpack 的经验也无济于事。

如 plugin page 中所述，这是一个 multi-step 过程：

1.原码：

if (!PRODUCTION) {
  console.log('Debug info');
}

if (PRODUCTION) {
  console.log('Production log');
}

2。由定义插件完成的内联:

if (!true) {
  console.log('Debug info');
}
if (true) {
  console.log('Production log');
}

3。缩小步骤，以及最终结果

console.log('Production log');

minification/optimization 步骤是通过名为 Terser, which is what Webpack is using. Terser looks like a fork of UglifyJS, and it, too, has the ability to remove dead code 的工具完成的。

所以是：

我要感谢@romellem 在这片丛林中为我指明了正确的方向。

PS：亲爱的未来读者，我是在 2019 年 5 月 10 日写的。我的发现可能很快就会过时。

How are the process.env.NODE_ENV checks removed from ReactJS production builds?