How to remove console.log ,when vite build use esbuild?

[tomatobybike]

vite.config.js

export default defineConfig({
  base: './',
  build:{
    sourcemap: false,
    minify: 'esbuild',
    // minify: 'terser',
    // terserOptions: {
    //   compress: {
    //     warnings: false,
    //     drop_console: true,
    //     drop_debugger: true,
    //     pure_funcs: ['console.log']
    //   }
    // }
  }})

===============================
I want to use esbuild to build,because because esbuild so faster then terser,but how can i remove console.log ,use esbuild

[timnick-snow]

Have the same confusion, can anyone provide a solution?

[tomatobybike]

use minify: 'terser' to build is slower then minify: 'esbuild' 44 seconds

terser build cost 78.73s

==========
esbuild cost 34.86s.

[tatsunix]

export default defineConfig({
    esbuild: {
      drop: ['console', 'debugger'],
    },
});

[MrFlyHouse]

@blinpete Thanks a lot! It works for me

[bigsnowballhehe]

export default defineConfig({
    esbuild: {
      drop: ['console', 'debugger'],
    },
});

But..vite use rollup to build. https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuild So this configuration will not take effect?

[blinpete]

@bigsnowballhehe
yeah, at first look it might seem confusing. but vite uses esbuild for building and pre-bundling, and then rollup comes in for bundling.

in shorts, don't worry the config will take effect ;)

[bigsnowballhehe]

@bigsnowballhehe yeah, at first look it might seem confusing. but vite uses esbuild for building and pre-bundling, and then rollup comes in for bundling.

in shorts, don't worry the config will take effect ;)

Thanks!

[sashasashasasha151]

Maybe I don't understand smth, but is it okay that in bundle files I still have my console statements? But in running app there is no logs.

[fengxinming]

@blinpete if I want to remove console.log and keep console.error, so how shall we do?

[AlexTMjugador]

Please check out #7920 (reply in thread) and its following replies.

[MrFlyHouse]

@fengxinming use pure configuration like this:

export default defineConfig(({ mode }) => {
  return {
    // other configuration
    esbuild: {
      pure: ['console.log'],
    }
  }
}

if you just want to remove console.log when build production dist (but keep it in development env or staging env), you can use pure configuration like this:

export default defineConfig(({ mode }) => {
  return {
    // other configuration
    esbuild: {
      pure: mode === 'production' ? ['console.log'] : [],
    }
  }
}

[forgetso]

This doesn't work in my config. Vite ^5.1.4 for console logs coming from external deps that are bundled. Any tips?

[forgetso]

The problem was my deps had changed console to some other minified name l.warn so I had to add a manual pure for that.

[waruyama]

Note that using pure may keep function calls in the arguments part.

For example console.assert(isValid(v), "Invalid value", v) will be replaced with isValid(v) if console.assert is defined as "pure", but isValid is not.

Unfortunately there is no fine grained built-in way to drop only some methods of console with their arguments, for example dropping console.log, but keeping console.error.

[xiaoxian521]

you can try this plugin vite-plugin-remove-console

[forgetso]

error during build:
TypeError: (0 , w1.default)(...).find is not a function
    at P1 (file:///home/user/project/node_modules/vite-plugin-remove-console/dist/index.mjs:277:13210)