1.由于使用 uglifyjs-webpack-plugin 插件打包会报错,不在介绍使用方法,
2.使用webpack提供的删除console的插件:

安装terser-webpack-plugin

npm install terser-webpack-plugin -D

然后在vue.config.js中写插件的配置:

module.export = {
  configureWebpack: (config)=>{
    if(process.env.NODE_ENV === 'production'){
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  }
}

但是不推荐这种用法,因为打包后包文件相对于是比较大的
console01.png

3.使用babel-plugin-transform-remove-console插件(推荐)
参考 https://forum.vuejs.org/t/remove-console-logs-from-production-buils/39327

# 安装依赖库
$ npm install babel-plugin-transform-remove-console -D
# or
$  yarn add babel-plugin-transform-remove-console --dev

【babel.config.js】配置如下

const plugins = ["@vue/babel-plugin-transform-vue-jsx"]
// 生产环境移除console
if(process.env.NODE_ENV === 'production') {
  plugins.push("transform-remove-console")
}
module.exports = {
  plugins: plugins,
  presets: [
    [
      '@vue/app', {
        modules: false,
        targets: {
          browsers: ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4", "iOS >= 8"]
        },
        useBuiltIns: 'entry',
      }
    ]
  ]
}

我比较推荐这种方法,利用此插件打包后和插件二相比较打包后差了10多k
console02.png

标签: webpack, vue-cli3

添加新评论