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

Question

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

不过，我想知道到底有哪些特定的babel-plugin / process / packages从生产React（react.min.js）中删除此条件，因为该文件中没有这样的条件

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

1. 使用Babel插件，将警告和不变的调用转换为if ("production" !== process.env.NODE_ENV)调用
2. 删除 最小化时，生产版本中的所有上述条件（或仅仅是其真实分支？）

后者如何/在何处实现？

Answer 1

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

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

关于工作方式的工作原理，这里的逻辑相当复杂，但是起点是Uglify的eliminate_dead_code function。

Answer 2

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

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

---

如plugin page中所述，这是一个多步骤过程：

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 using的意思。 Terser看起来像a fork of UglifyJS，has the ability to remove dead code也是如此。

就是这样：

1. ReactJS编译生产
2. React用DefinePlugin process.env.NODE_ENV = 'production'配置Webpack
3. Webpack内联，由Webpack的DefinePlugin
完成
4. Webpack优化
5. Webpack Terser插件
6. Terser最终删除了无效的代码

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

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