Vue CLI 3 remove console.log and code comments with Terser

Question

I'm using VUE CLI 3 and I need to remove the console.log and code comments from the production built. This is my Terser setup:

webpack.config.js in src folder

    module.exports = {
mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          ecma: undefined,
          warnings: false,
          parse: {},
          compress: {drop_debugger},
          mangle: true, // Note `mangle.properties` is `false` by default.
          module: false,
          output: null,
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: undefined,
          keep_fnames: false,
          safari10: false,
        },
      }),
    ],
  },
};

My production workflow: Run npm run build -> cd dist -> npm run serve

The production build still outputs all console.log statements and shows code comments (). What do I need to change to remove them?

Try : terserOptions: { ecma: 6, compress: { drop_console: true }, output: { comments: false, beautify: false } } — JeffProd, Oct 09 '19 at 18:05
@JeffProd Just tried it but I received the same result. console.log and comments are still visible in the output. Any ideas? — Tom, Oct 10 '19 at 09:42
npm run serve runs the dev build, does it not? Terser is only applied to the production build. — madflow, Oct 10 '19 at 11:08
@madflow That would explain a lot. I'm running _npm run build_ -> _npm run serve_ on the _dist_ build. What is the correct command to test the _dist_ build before distribution? (_npm run build_ is setting the _production mode_ right?) — Tom, Oct 10 '19 at 11:10

madflow · Accepted Answer · 2019-10-10T19:17:08.320

10

First of all: make sure you are configuring Terser correctly:

terserOptions: {
    ecma: 6,
    compress: { drop_console: true },
    output: { comments: false, beautify: false }
}

npm run serve

is usually a shortcut for:

vue-cli-service

vue-cli-service --help

  Usage: vue-cli-service <command> [options]

  Commands:

    serve     start development server
    build     build for production
    inspect   inspect internal webpack config
    lint      lint and fix source files

So when your workflow is the above mentioned npm run build -> cd dist -> npm run serve then you are actually starting the dev server, which does not apply Terser.

In order to run the production build you can use any webserver capable of serving static content:

NodeJs examples:

npm install -g serve
serve -s dist

or

npm install -g node-static
static dist

edited Oct 10 '19 at 19:17

answered Oct 10 '19 at 11:16

madflow

7,718
3
39
54

Thanks for your answer and explanation. I'm running the build with _serve -s dist_ now but the logs and comments are still in the build - same goes for the uploaded build on my server. I opened a new question to find the root of this issue. LINK: https://stackoverflow.com/questions/58328991/vue-cli-3-vue-config-js-vs-webpack-config-js-for-plugins – Tom Oct 10 '19 at 18:32
1

I updated my answer - it works for me when I add `ecma: 6` like mentioned above in the comments. Would be interesting to know...why... @Tom – madflow Oct 10 '19 at 19:18

Vue CLI 3 remove console.log and code comments with Terser

1 Answers1