vue cli 3.0 文件压缩去掉console

透明技术人

vue项目里面调试信息console.log通过打包自动去掉方式

我在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' ]
    }
  }
  

注意:这里使用了环境变量进行控制,只有打生产包的时候才会调用这个插件进行打包优化,因为development环境下config.optimization是undefined
解释一下:vue-cli3.0在打包过程中就使用了terser-webpack-plugin插件进行优化,具体配置可以node_modules/@vue/cli-service/lib/config/prod.js中看到,terser-webpack-plugin的具体配置在同一个文件夹下terserOptions.js中,在生产环境加入以上配置项即可

赞10

阅读 1.1k

web前端技术栈八面玲珑来汇总
超实用web前端项目代码段总结
189 声望
1 粉丝
0 条评论
189 声望
1 粉丝
文章目录
宣传栏