Remove `console.log` from a React Native app in the release (production) build using Yarn or npm for performance optimization

Ajmal Hasan - Mar 28 '21 - - Dev Community

Remove Console Statements

Using console.log statements is one of the most common patterns to debug in JavaScript applications in general, including React Native apps. Leaving the console statements in the source code when publishing React Native apps can cause some big bottlenecks in the JavaScript thread.

One way to automatically keep track of console statements and remove them is to use a third-party dependency called babel-plugin-transform-remove-console. You can install the dependency by running the following command in a terminal window:

Library Installation:

npm install babel-plugin-transform-remove-console --save-dev
                         OR
yarn add babel-plugin-transform-remove-console -D
Enter fullscreen mode Exit fullscreen mode

Integration
Edit babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: ["transform-remove-console"],     //removing consoles.log from app during release (production) versions
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

OR .babelrc

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .