Vite: terser options for drop_console do not work

[ssuess]

What happened?

As defined in the specs, the terserOptions for dropping console logs do no work in vite builds:

minify: 'terser',
extendViteConf (viteConf) {
        viteConf.terserOptions = {
          compress: {
            drop_console: true,
            drop_debugger: true
         }
        }
      },

What did you expect to happen?

Expected console logs to be dropped from build.

Reproduction URL

https://stackblitz.com/edit/quasarframework-cxqksw?file=quasar.config.js

How to reproduce?

1. quasar build

Examine output, console logs not removed

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Darwin(21.5.0) - darwin/x64
NodeJs - 16.15.1

Global packages
  NPM - 8.13.2
  yarn - 1.22.19
  @quasar/cli - 1.3.2
  @quasar/icongenie - 2.3.0
  cordova - Not installed

Important local packages
  quasar - 2.7.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.0.5 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.14.2 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.37 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.16
  pinia - Not installed
  vuex - 4.0.2 -- state management for Vue.js
  vite - 2.9.13 -- Native-ESM powered web dev build tool
  eslint - 8.19.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-testing - 2.0.4 -- A Quasar App Extension for managing Test Harnesses
  @quasar/quasar-app-extension-testing-e2e-cypress - 4.1.4 -- A Quasar App Extension for Cypress e2e

Relevant log output

No response

Additional context

esbuild has its own problems (drops css the app depends on) which is why I need to use terser. Terser does not drop the css rules I need, but it does not allow dropping of console logs (despite what the docs say). This all works fine in webpack btw.

[MilosPaunovic]

https://stackoverflow.com/a/70497046

I'm guessing you need to pass the minify prop to Vite, as well:

extendViteConf (viteConf) {
  viteConf.minify: 'terser',
  viteConf.terserOptions = {
    compress: {
      drop_console: true,
      drop_debugger: true
    }
  }
}

[ssuess]

I will try that thanks! (Although in the conf file, it is shown just underneath build)

[ssuess]

alas that did not work. And it first built with an error using your formatting above. But I was then able to get it to build with this:

extendViteConf (viteConf) {
        viteConf.minify = 'terser',
        viteConf.terserOptions = {
          compress: {
            drop_console: true
         }
        }
      },

but it didn't matter. The console.log statements are still in the build output :(

[MilosPaunovic]

This could be closed, as the solution is here https://github.com/quasarframework/quasar/discussions/13890

[ssuess]

@MilosPaunovic Actually no, the solution is for esbuild. There is still no solution if one should choose terser.

[snowwolfjay]

https://stackblitz.com/edit/quasarframework-paqbhe

your config not right, vite config guid terseroptions is a sub config under build key, try the online build test. and viteConf.minify = 'terser' should be viteConf.build.minify = 'terser'

 viteConf.build.terserOptions = viteConf.build.terserOptions || {};
 viteConf.build.terserOptions = {
          ...viteConf.build.terserOptions,
          compress: {
            ...viteConf.build.terserOptions.compress,
            drop_console: true,
          },
        };