Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 340
Tom Avatar asked Oct 09 '19 15:10

Tom


People also ask

How to remove console logs from a Vue build?

How to remove console logs from builds? You will require babel plugin to remove the console.log from production build. If you are using vue-cli 3. you will find babel.config.js file where you can include this plugin.

How to remove all console logs from your project before production?

Removing all console.log () from your project before production can be very difficult, Here is how to remove all console.log () from your project in less than a minute. Open your project in VS Code ( Since we are using Regex, It is easier to use it in VS Code ) Click on the search icon on VS Code sidebar. It will open the search option

How to remove console log from a Babel Project?

There is plugin available to remove a console.log statements from project source called babel-plugin-transform-remove-console add plugin name in .babelrc file. This is a better option than assigning an empty function to console.log. The empty function removes the option to log anything in your production environment, even for debugging purposes.

What is console log in C++?

console.log () is a debugging tool that can assist you to figure out what your code is doing. You may follow along as your code executes by displaying a message that contains either descriptive text that tells you what's going on or the values of certain variables.


1 Answers

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
like image 196
madflow Avatar answered Oct 19 '22 23:10

madflow