vue项目打包优化 去除console.log、注释、黄色警告

在vue.config.js里判断是否是生产环境

const isProduction = process.env.NODE_ENV === 'production'

vue-cli配置参考里有一个productionSourceMap将其设为false ，在打包时不会创建.map的文件

module.exports = {

  productionSourceMap:!isProduction,
}

 去除console.log、注释、黄色警告

安装插件

npm install terser-webpack-plugin --save-dev

将plugins放在configureWebpack下

let plugins = []
const TerserPlugin = require("terser-webpack-plugin");
if(isProduction){
  plugins.push(new TerserPlugin({
    terserOptions:{
      output:{
        comments:false,//去除注释
      },
      warnings:false,//去除黄色警告
      compress:{
        drop_console:true,
        drop_debugger:true,
        pure_funcs:['console.log'], //移除console.log 避免console.error
      }
    }
  }))
}

整体代码

const { defineConfig } = require('@vue/cli-service')
let plugins = []
const TerserPlugin = require("terser-webpack-plugin");
// 判断开发还是生产
  const isProduction = process.env.NODE_ENV === 'production'
// 生产环境
if(isProduction){
  plugins.push(new TerserPlugin({
    terserOptions:{
      output:{
        comments:false,//去除注释
      },
      warnings:false,//去除黄色警告
      compress:{
        drop_console:true,
        drop_debugger:true,
        pure_funcs:['console.log'], //移除console.log 避免console.error
      }
    }
  }))
}
module.exports = {
  ...defineConfig({
    transpileDependencies: true,
  }),
  productionSourceMap:!isProduction,
  // 代理
  // 配置对象会最终和cli默认的配置进行合并
  configureWebpack:{
    devServer:{
      open:true,
      host:'127.0.0.1',
      proxy:{
        '/api':{
          logLevel: 'debug',
          // logProvider:()=>console,
          target: '#',
        },
      },
      client: {
        overlay: false
      }
    },
    plugins
  },
}