Do you know these operations delete the console.log code?

Preface

Speaking of console.log debugging, needless to say, it is very easy to use, and helped us solve a lot of Bug . We can often see this console debugging development environment But the production environment is console does not allow the 0614d6971e613c information code to appear. Are you still manually deleting one by one, that's so tiring!

Let's take a look at these several ways to clear the production environment console useless code.

Basic operation

Webpack configuration

uglifyjs-webpack-plugin

We can take a look at the introduction of the plug-in, which is used to reduce the code size of js And if you install and run the plug-in, the node version is in the v6.9.0+ and Webpack version v4.0.0+ .

The official website address is here: uglifyjs-webpack-plugin

install

npm i uglifyjs-webpack-plugin

uses

webpack.config.js following configuration under the 0614d6971e62d5 file.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    // 省略...
    mode: "production",
    optimization: {
        minimizer: [
          new UglifyJsPlugin({
            uglifyOptions: {
              // 删除注释
              output:{
                comments: false
              },
              compress: {
                drop_console: true, // 删除所有调式带有console的
                drop_debugger: true,
                pure_funcs: ['console.log'] // 删除console.log
              }
            }
          })
        ]
      } 
}

After configuring the above code, restart to see the effect. Note: The code will only be valid in the production environment. , see our configuration mode: production above, which is the production environment. To explain the difference between the above two attributes drop_console and pure_funcs , the former is to delete all the debugging methods with console prefix, such as: console.log , console.table , console.dir as long as the console is deleted. The latter is the configuration, that is, it will delete what is the value of the array. For example, pure_funcs：[console.log, console.dir] will only delete these two items, but will not delete the console.table code in the code.

ES5 above code in the production environment, the console debugging code can be cleared, but there is another problem that needs attention, that is, the plug-in only supports 0614d6971e63f8 syntax. If your code involves ES6 syntax, an error will be reported.

terser-webpack-plugin

The plug-in is the uglifyjs-webpack-plugin , which is used to reduce the code size of js

Look at the above description: If your Webpack version is greater than 5+, you do not need to install this terser-webpack-plugin plug-in, it will come with terser-webpack-plugin . But your Webpack version is still 4, you need to install the terser-webpack-plugin version 4

install

npm i terser-webpack-plugin@4

uses

const TerserWebpackPlugin = require("terser-webpack-plugin");

module.exports = {
    // 省略...
    mode: "production",
    optimization: {
        minimizer: [
              new TerserWebpackPlugin({
                terserOptions: {
                  compress: {
                    warnings: true,
                    drop_console: true,
                    drop_debugger: true,
                    pure_funcs: ['console.log', "console.table"] // 删除console
                  }
                }
            });
        ]
    }
}

The plug-in function is the same as the above, the attribute usage is also the same, the only plug-in can support ES6 syntax. code takes effect in the production environment.

Vue-cli configuration

This is the recommended cleaning console plug-in used Vue-cli For more introduction, see here babel-plugin-transform-remove-console

install

npm i babel-plugin-transform-remove-console --save-dev

uses

Configure in the project root directory babel.config.js file. The plug-in does not distinguish production environment or development environment , as long as you configure it can take effect.

module.exports = {
    plugins: [
        "transform-remove-console"
    ]
}

// 生产环境如下配置

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
    prodPlugins.push('transform-remove-console')
}
module.exports = {
    plugins: [
        ...prodPlugins
    ]
}

Simple and rude deletion

The next one is a sorrowful operation, please look at it with wide-eyed eyes, hahaha. Directly rewrite the method of console.log

console.log = function () {};

Flexible use of VScode editor

uses

Directly search the console.log regular matches in this project globally, and then replace all with empty ones.

console\.log\(.*?\)

Handwriting Loader to delete console

Let's write a simple version of the clean console plug-in.

Create a js file 0614d6971e67a6, my name here is clearConsole.js , in fact, here is also used to match and replace it with empty. If you don’t understand loader you can read my article write a Sass-loader .

clearConsole.js

const reg = /(console.log\()(.*)(\))/g;
module.exports = function(source) {
    source = source.replace(reg, "")
    return source;
}

Configure on Vue.config.js

module.exports = {
    // 省略...
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    exclude: /node_modules/,
                    loader: path.resolve(__dirname, "./clearConsole.js")
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: path.resolve(__dirname, "./clearConsole.js")
                }
            ],
        }
    },
}

Configure the code as above. Clear the js file and vue in the console.log file. exclude not to search in the node_module

Thank you for watching. If you have any help, please pay attention to the public : 1614d6971e68cb Front-end entertainment circle

grateful

Thank you for reading, if you have any help, please pay attention and bookmark it

If you feel helpful, you can follow the front-end entertainment circle public account, and push a little knowledge for you every day

You can also add me to WeChat make friends, you can chat with me or pull you into the technical exchange group