vueまたはreactプロジェクトの生産環境はconsoleを取り除く.log

開発環境でたくさんのconsoleを書きました.log/info/debugは、生産環境でこれらのconsoleを削除する必要があります.手動で削除するのは疲れるし、後で再開発したいならconsoleを書き直さなければならない.実はwebpackはconsoleを削除するプラグインを提供して、vue-cli 3の中でこのように使います:まずterser-webpack-pluginをインストールします

npm install terser-webpack-plugin -D

そしてvueでconfig.jsファイルにプラグインの構成を書く:

module.exports = {
  configureWebpack: (config)=>{
    if(process.env.NODE_ENV === 'production'){
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  }
}

————————————————————————2020.1.14補足:上の書き方はwebpackの構成を直接修正することであり、vueの公式ドキュメントには合併される対象を返すこともできると書かれています.書き方は以下の通りです.

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack: (config)=>{
    if(process.env.NODE_ENV === 'production'){
      //             
      return {
        optimization:{
  		  minimizer: [
			new TerserPlugin({
				sourceMap:false,
				terserOptions:{
				  compress:{
				    drop_console : true
				  }
				}
			})
          ]
		}
	  }
    }
  }
}

--------------2020.4.22補足:最近reactプロジェクトをしている間にwebpackの構成を発見したり、terserを使ってconsoleを削除したりすることができます.log. webpack.config.prod.js:

module.exports = {
  optimization:{
    minimizer: [
	  new TerserPlugin({
	    sourceMap:false,
		terserOptions:{
		  compress:{
		    drop_console : true
		  }
		}
	  })
    ]
  }
}