vue-cli 3.0 生产包去除console.log

使用uglifyjs-webpack-plugin来进行压缩优化，但是遇到了Unexpected token: name ***的报错，又是一番查询之后，有说这个插件不支持es6之后的语法，但是vue-cli3.0使用的是babel-preset-env,默认的配置就包含了babel-preset-es2015

最后搜索发现vue-cli3.0在打包过程中就使用了terser-webpack-plugin插件进行优化，具体配置可以node_modules/@vue/cli-service/lib/config/prod.js中看到。

if (process.env.VUE_CLI_TEST) {
  webpackConfig.optimization.minimize(false)
} else {
  const TerserPlugin = require('terser-webpack-plugin')
  const terserOptions = require('./terserOptions')
  webpackConfig.optimization.minimizer([
    new TerserPlugin(terserOptions(options))
  ])
}

这里使用了环境变量进行控制，只有打生产包的时候才会调用这个插件进行打包优化。

terser-webpack-plugin的具体配置在同一个文件夹下terserOptions.js中，只要在这个文件中compress对象加入

warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']

推荐在vue.config.js中给

在 vue.config.js 中的 configureWebpack 选项提供一个对象会被 webpack-merge 合并入最终的 webpack 配置，因此vue-cli3构建的项目中只需要修改terserOptions即可，vue.config.js配置如下：

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
    }
  }

这几个属性就可以了出自https://www.cnblogs.com/KlllB/p/10682262.html

另外一种

image.png

vue-cli 3.0 生产包去除console.log

推荐阅读更多精彩内容