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'],
    },
});

[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.

[ahayes91]

for vite 8, esbuild is no longer an option, and the default oxc at https://vite.dev/config/build-options#build-minify doesn't have drop options documented with vite yet. https://www.sitepoint.com/vite-8-migration-esbuild-oxc-production-react/ has a workaround using terser that I'm testing out currently!

build: {
       minify: 'terser',
       terserOptions: {
         compress: { drop_console: true, drop_debugger: true },
       },
}

[fengxinming]

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

[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.

[fleeze]

pure: ['console.log']并不是单纯移除，可能会导致严重的后果，请谨慎使用

[th0rgall]

For me this approach with pure is also not working, maybe because I use a console wrapper (logger.debug() etc).

As a workaround, I prepended every logger.debug statement with a DEV: label and then used the dropLabels esbuild config https://esbuild.github.io/api/#drop-labels to drop those statements. It's more verbose but it seems to work reliably.

[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)