Vue打包快速去重console.log
方法一
注意:
node版本 v6.9.0+ ; webpack版本 v4.0.0+ 。
代码只会在生产环境(production)下有效。
安装:npm i uglifyjs-webpack-plugin
使用:在webpack.config.js文件下进行如下配置,重启生效
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 } } }) ] } }
方法二
注意:
如果webpack版本大于5+,则不需要安装terser-webpack-plugin插件,会自带。
如果webpack版本还是4,则需要安装此插件4的版本。
该插件与上面一样,属性用法也一样,都是在生产环境生效。不同在于该插件可支持ES6语法。
安装:npm i terser-webpack-plugin@4
使用:
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 } } }); ] } }
方法三:
在Vue-cli项目中推荐使用的清除console插件。更多介绍:babel-plugin-transform-remove-console
安装:npm i babel-plugin-transform-remove-console --save-dev
使用:
在项目根目录babel.config.js文件下配置。该插件不区分生产环境或者开发环境,只要你配置都能生效。
module.exports = { plugins: [ "transform-remove-console" ] } // 生产环境如下配置 const prodPlugins = [] if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console') } module.exports = { plugins: [ ...prodPlugins ] }
方法四:
直接重写console.log方法
console.log = function () {};
在VSCode编辑器使用
全局搜索项目中的console.log正则匹配,然后全部替换为空
console\.log\(.*?\)

浙公网安备 33010602011771号