Vue Cli 3パッケージ構成--console.log文を自動的に無視

プラグインのダウンロード

npm i -D uglifyjs-webpack-plugin

vue.config.jsで使用を導入

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    configureWebpack: {
        plugins: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        drop_console: true,
                    },
                },
            }),
        ],
    },
    devServer: {
        proxy: {
            '/xxx': {
                target: 'http://192.168.150.17:8080/',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/xxx': 'xxx',
                },
            },
        },
    },
    publicPath: './',
}

このときnpm run buildパッケージを実行したファイルにはconsole.log文はありません.
しかし、開発環境ではコンパイルが非常に遅いという問題があります.例えば、変数の値を変更すると、私のパソコンは10秒コンパイルしてからページを書き直すことができ、92% chunk asset optimizationに詰まっています.console.log文を削除する機能はパッケージ化時にのみ必要であるため、本番環境でのみ上記の構成コードを追加する判断を加えることができます.
適切な構成は次のとおりです.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const config = {
    devServer: {
        proxy: {
            '/xxx': {
                target: 'http://192.168.150.17:8080/',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/xxx': 'xxx',
                },
            },
        },
    },
    publicPath: './',
}

if (process.env.NODE_ENV === 'production') {
    config.configureWebpack = {
        plugins: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        drop_console: true,
                    },
                },
            }),
        ],
    }
}

module.exports = config

2020.8.5更新
上記の方法では、梱包するたびに時間が長すぎるという欠陥があります.今私はすでにこの方法を捨てて、console.log()関数を書き換えることに変えて、効果はもっと良くて、具体的なコードは以下の通りです:

export function rewirteLog() {
    console.log = (function (log) {
        return process.env.NODE_ENV == 'development'? log : function() {}
    }(console.log))
}

この関数をmain.jsに導入して1回実行すれば,従来の効果を実現できる.
参考資料

uglifyjs-webpack-plugin