如何从ReactJS生产版本中删除process.env.NODE_ENV检查？

Question

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

不过，我想知道什么特定的babel-plugin / process / packages实际上从生产React（ react.min.js ）中删除了此条件，因为该文件中没有这样的条件。

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

后者如何/在哪里实现？

Answer 1

丑化（缩小）JS时，将删除该代码。

UglifyJS2有一个选项dead_code ，用于“ 删除无法访问的代码。 ”

至于如何工作的，这里的逻辑是相当复杂的，但出发点是丑化的eliminate_dead_code功能。

Answer 2

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

我没有得到这个插件的名称，或者它只是一个糟糕的选择。 在我的研究中，试图找出ReactJS如何清理其生产代码，我已经多次浏览了new webpack.DefinePlugin()调用。 另外，我对Webpack缺乏经验也无济于事。

如插件页面中所述，这是一个多步骤过程：

1.原始代码 ：

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

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

2.内联由Define插件完成 ：

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

3.缩小步骤以及最终结果

console.log('Production log');

最小化/优化步骤是通过一个名为Terser的工具完成的，Webpack正在使用该工具。 Terser看起来像UglifyJS的一个分支，它也具有删除无效代码的能力。

所以是：

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

PS：亲爱的未来读者，我已经在2019年5月10日撰写了这篇文章。我的发现可能很快就会过时。