Webpack と vue-cli マージ構成、実稼働環境コードをパッケージ化するときに console.log、コード コメント、デバッガーをすべて削除する方法

この記事は vue-cli 5.0.0、webpack 5.0、TerserWebpackPlugin に基づいています。

最近、会社のプロジェクト開発がオンラインになった後、テスト中にコンソールに大量の情報が出力されていることが判明しました。ただし、手動で削除してパッケージ化すると作業負荷が高くなり、将来のメンテナンスやデバッガに役立ちません。コンソールとコメントを自動的に削除するには、すべてを webpack でパッケージ化する必要があります。

最初のステップは、インターネット上で console.log ステートメントを最適化するための webpack プラグイン --------- uglifyjs-webpack-pluginを見つけることですが、npm ライブラリを確認したところ、このライブラリは長い間更新されているため、webpack5には適していない可能性があると思われます

 最後に、 webpack 公式 Web サイトでこのプラグインTerserWebpackPluginを見つけました。

 次のステップは、構成をダウンロードすることです。

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

//vue.config.js
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    //...
configureWebpack: {
   optimization: {
      minimize: true,
      minimizer: [new TerserPlugin({
        terserOptions: {
            compress: {
                drop_debugger: true, 
                drop_console: true,
                pure_funcs: ['console.log']//删除打印语句
            },
            format: {
              comments: false //删除所有注释
            }
            
        },
        parallel: true,  //多核打包，提升打包速度
        extractComments: false //是否将注释全部集中到一个文件中
     })],
   },
}
};

そして完了です（そうではありません） 

その後失敗し、印刷されたメモはまだそこにあります。。。。ランダム印刷パッケージの設定を見てみましょう (詳細については、vuecli ドキュメントwebpack 関連 | Vue CLIを参照してください)

vue inspect --mode prodction > ./inspect.js

 

 

 configurewebpack で構成した最適化は、webpack のデフォルト構成ファイルの最適化とマージされず、オプションにマージされたことがわかりました。ドキュメントを調べた結果、構成をカスタマイズしたい場合は、vuecli のchainWebpack メソッドを使用する必要があることがわかりました。

//vue.config.js
const { defineConfig } = require('@vue/cli-service');
const TerserPlugin = require("terser-webpack-plugin");
module.exports = defineConfig({
  lintOnSave: false,
  transpileDependencies: true,
  productionSourceMap: false,
  chainWebpack: config => { 
    config.optimization.minimizer('terser').tap(args => {
      args.forEach(item => {
        if(item.hasOwnProperty('terserOptions')) {
          Object.assign(item['terserOptions'].compress,{
            drop_debugger: true,
            drop_console: true,
            pure_funcs: ['console.log']
          })
        }
        item['terserOptions']['format'] = {
          comments: false
        }
      })
      return args
    })
  },
})

 特定の webpack チェーンの構文は次を参照できます。

GitHub - Yatoo2018/webpack-chain at zh-cmn-Hans Webpack 構成の変更を生成および簡素化するチェーン API。- GitHub - Yatoo2018/webpack-chain at zh-cmn-Hans https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans

最後に、パッケージ化構成ファイルを再度出力します。 

optimization: {
   //....
   mnimizer: [
      /* config.optimization.minimizer('terser') */
      new TerserPlugin(
        {
          terserOptions: {
            compress: {
              arrows: false,
              collapse_vars: false,
              comparisons: false,
              computed_props: false,
              hoist_funs: false,
              hoist_props: false,
              hoist_vars: false,
              inline: false,
              loops: false,
              negate_iife: false,
              properties: false,
              reduce_funcs: false,
              reduce_vars: false,
              switches: false,
              toplevel: false,
              typeofs: false,
              booleans: true,
              if_return: true,
              sequences: true,
              unused: true,
              conditionals: true,
              dead_code: true,
              evaluate: true,
              drop_debugger: true,
              drop_console: true,
              pure_funcs: [
                'console.log'
              ]
            },
            mangle: {
              safari10: true
            },
            format: {
              comments: false
            }
          },
          parallel: true,
          extractComments: false
        }
      ),
     minimize: true
     //...
}

この時点で、TerserPlugin プラグインのデフォルト設定は、カスタムで変更された設定とマージされています。

最後に、再パッケージ化した後、コンソールにはコメントがなく、完璧に完了していることがわかりました。