开始使用ReactJS的prop validation feature ,正如文档所说,出于性能原因,它仅适用于“开发模式”。

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

我尝试寻找如何触发/切换开发模式,但没有任何运气。

请您参考如下方法:

另一个答案假设您正在使用 React 中的外部预构建文件,虽然正确,但这并不是大多数人将要或应该使用 React 作为包的方式。此外,目前大多数 React 库和包都依赖于相同的约定来在生产过程中关闭开发时间助手。仅使用缩小的 react 也会将所有这些潜在的优化留在桌面上。

最终,神奇之处在于 React 嵌入了对 process.env.NODE_ENV 的引用。整个代码库;这些就像一个功能切换。

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 转换并运行 browserify 构建步骤("set NODE_ENV=production" 在 Windows 上)

结果

这将生成包含 process.env.NODE_ENV 的所有实例的输出包。替换为字符串文字:"production"

奖金

缩小转换后的代码时,您可以利用“死代码消除”。 DCE 是指压缩器足够聪明,能够意识到:"production" !== "production" 总是 false,因此只会删除 if block 中的任何代码,从而节省字节。


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!