使用uglifyjs-webpack-plugin來(lái)進(jìn)行壓縮優(yōu)化，但是遇到了Unexpected token: name ***的報(bào)錯(cuò)，又是一番查詢(xún)之后，有說(shuō)這個(gè)插件不支持es6之后的語(yǔ)法，但是vue-cli3.0使用的是babel-preset-env,默認(rèn)的配置就包含了babel-preset-es2015

最后搜索發(fā)現(xiàn)vue-cli3.0在打包過(guò)程中就使用了terser-webpack-plugin插件進(jìn)行優(yōu)化，具體配置可以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))
  ])
}

這里使用了環(huán)境變量進(jìn)行控制，只有打生產(chǎn)包的時(shí)候才會(huì)調(diào)用這個(gè)插件進(jìn)行打包優(yōu)化。

terser-webpack-plugin的具體配置在同一個(gè)文件夾下terserOptions.js中，只要在這個(gè)文件中compress對(duì)象加入

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

推薦 在vue.config.js中 給

在 vue.config.js 中的 configureWebpack 選項(xiàng)提供一個(gè)對(duì)象會(huì)被 webpack-merge 合并入最終的 webpack 配置，因此vue-cli3構(gòu)建的項(xiàng)目中只需要修改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']
    }
  }

這幾個(gè)屬性就可以了 出自https://www.cnblogs.com/KlllB/p/10682262.html

另外一種

image.png