使用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
