ControlS

Removing console logs in production

December 15, 2019

We all debug our JS applications by console.log(). Yeah even though we have debugger most of us don’t use it. Even if you use debugger there might be someone else in the team who uses console.log(). So finally we end up with some hundreds of console logs which slows down the production code.

I came across two ways to solve this.

  1. During your build you can have this

    console.log = () => {}
  2. babel-plugin-transform-remove-console. This transpiles the code and removes console logs.

If you think both are same, in the same way as I thought, then you are wrong. Second way is better than first. WHY?

 Screenshot

The reason is if we have console.log(state.reduce().filter().map().etc())

  • In case 1 the final bundled code will be

    console.log = () => {}
    console.log(
    state
      .reduce()
      .filter()
      .map()
      .etc()
    )

    So here state.reduce().filter().map().etc() gets executed which might take some time

  • In case 2 using babel transform the final bundled code bundles to either

    Note : ( I am not sure which one )

    1. It might totally remove it
    1. replaces it with () => {}

    so there will be no place in final bundle where state.reduce().filter().map().etc() is executed.

So I think babel-plugin-transform-remove-console at this moment is the best way to remove console logs.


A C SREEDHAR REDDY

Written by A C SREEDHAR REDDY.
Chennai.Github