如何打开/关闭ReactJS的“开发模式”？

Question

从使用ReactJS的prop验证功能开始，正如文档所说，出于性能原因，该功能仅在“开发模式”下有效。

React似乎正在验证我注释的特定组件的属性，但我不记得显式打开“开发模式”。

我尝试搜索如何触发/切换开发模式，但是没有任何运气。

Answer 1

对方的回答假设您使用外部预建的文件从反应，而正确的，是大多数人不会如何去或 应该 消耗作出反应，一个包。而且，在这一点上，大多数每个React库和包都
还 依赖相同的约定来在生产期间关闭开发人员时间助手。仅使用缩小的反应，所有这些潜在的优化也将留在桌面上。

最终，魔术归结为对process.env.NODE_ENV整个代码库的React嵌入引用。这些就像功能切换一样。

if (process.env.NODE_ENV !== "production")
  // do propType checks

上面是最常见的模式，其他库也遵循它。因此，要“禁用”这些检查，我们需要切换NODE_ENV到"production"

禁用“开发模式”的正确方法是通过选择的捆绑程序。

网络包

DefinePlugin在您的webpack配置中使用，如下所示：

new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify("production")
})

浏览器

使用Envify转换并在NODE_ENV=production（"set NODE_ENV=production"Windows上）中运行浏览器构建步骤

结果

这将产生输出包，其中所有实例都process.env.NODE_ENV被字符串文字替换："production"

奖金

最小化转换后的代码时，您可以利用“消除死代码”的优势。DCE是当minifier是聪明地认识到："production" !== "production"是 总是 假的，这样只会删除任何代码在if块节省您的字节。