从 React Native 应用程序中删除 console.log

Question

在将 React Native 应用程序部署到商店之前，您是否应该删除 console.log() 调用？如果 console.log() 调用保留在代码中，是否存在一些性能或其他问题？

有没有办法删除一些任务运行器的日志（以类似于 Grunt 或 Gulp 等网络相关任务运行器的方式）？我们在 development/debugging/testing 阶段仍然需要它们，但不在生产阶段。

Answer 1

相信最好的做法是将调试代码包装在诸如...

if(__DEV__){
    console.log();
}

这样，只有当您运行在打包程序或模拟器中时，它才会运行。更多信息在这里... https://facebook.github.io/react-native/docs/performance#using-consolelog-statements

Answer 2

好吧，您可以随时执行以下操作：

if (!__DEV__) {
  console.log = () => {};
}

因此，一旦 __DEV__ 不正确，每个 console.log 都会失效。

Answer 3

Babel 转译器可以使用以下插件为您删除 console 语句：

npm i babel-plugin-transform-remove-console --save-dev

编辑 .babelrc:

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

并且 console 语句已从您的代码中删除。

来源：https://hashnode.com/post/remove-consolelog-statements-in-production-in-react-react-native-apps-cj2rx8yj7003s2253er5a9ovw

Answer 4

使用 Sentry 跟踪异常会在生产中自动禁用 console.log，但也会将其用于跟踪设备日志。因此，您可以在哨兵异常详细信息（面包屑）中查看最新日志。

Answer 5

我发现以下是一个不错的选择，因为即使 __DEV__ === true，如果您不是远程调试，也不需要记录。

事实上，我发现 RN/JavaScriptCore/etc 的某些版本在记录（甚至只是字符串）时几乎停止，而 Chrome 的 V8 引擎则不是这种情况。

// only true if remote debugging
const debuggingIsEnabled = (typeof atob !== 'undefined');

if (!debuggingIsEnabled) {
    console.log = () => {};
}

Answer 6

我知道这个问题已经得到解答，但我只想添加我自己的 two-bits。返回 null 而不是 {} 略微更快，因为我们不需要在内存中创建和分配空对象。

if (!__DEV__)
{
   console.log = () => null
}

这显然极小，但您可以在下面看到结果

// return empty object
console.log = () => {}
console.time()
for (var i=0; i<1000000; i++) console.log()
console.timeEnd()

// returning null
console.log = () => null
console.time()
for (var i=0; i<1000000; i++) console.log()
console.timeEnd()

虽然在其他地方测试时更明显：

老实说，在现实世界中，这可能不会有太大的好处，只是想我会分享。

Answer 7

我使用 babel-plugin-transform-remove-console 进行了尝试，但上述解决方案对我不起作用。

如果有人也在尝试使用 babel-plugin-transform-remove-console 可以使用这个。

npm i babel-plugin-transform-remove-console --save-dev

编辑babel.config.js

module.exports = (api) => {
  const babelEnv = api.env();
  const plugins = [];
  if (babelEnv !== 'development') {
    plugins.push(['transform-remove-console']);
  }
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins,
  };
};

从 React Native 应用程序中删除 console.log

Removing console.log from React Native app

performance

automation

console.log

react-native