Webpack 4 圧縮時にJavaScriptのコメントを全て削除する

PageSpeed Insights の結果を眺めていたところ、JavaScript の圧縮をしているにも関わらず、JavaScript のサイズ削減に関する警告が出力されていました。

Build 後の JavaScript を 改めて確認すると、以下のようなライセンスコメントでそれなりのサイズになっていることがわかりました。

/**
 * @license
 * Copyright 2017 Google Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

Webpack 4 の JavaScript の圧縮機能

optimization を確認しました。
Webpack 4 では、production mode を指定して Build すると、JavaScript の圧縮が有効になります。
デフォルトでは、TerserPlugin がJavaScript の圧縮に使用されます。
Webpack から TerserPlugin に、オプションが指定できるかというとそれはできないようで、optimization.minimizer に、オプション指定した TerserPlugin のインスタンス を 渡す必要があります。

terser-webpack-plugin のインストール、設定

webpack-contrib/terser-webpack-plugin: Terser Plugin をインストールして、コメントを削除する設定を行います。

インストール

npm i -D terser-webpack-plugin      
+ terser-webpack-plugin@1.2.3         

設定

• extractCommentsに 'all' を指定する
  README.md に設定方法の記載がありますが、extractComments に、all を指定すると全てのコメントを削除できます。
  

  const Merge = require("webpack-merge");
  const BaseConfig = require("./webpack.base.config.js");
  const TerserPlugin = require('terser-webpack-plugin');   
  
  module.exports = Merge(BaseConfig, {
      plugins: [],        
      optimization: {
          minimizer: [
          new TerserPlugin({
              extractComments: 'all',
          }),
          ],
      },
  });
  

• terserOptions.output.comments に false を指定する
  terserOptions.output.comments に false を指定することでも、コメントの削除は可能でした。
  

  const Merge = require("webpack-merge");
  const BaseConfig = require("./webpack.base.config.js");
  const TerserPlugin = require('terser-webpack-plugin');   
  
  module.exports = Merge(BaseConfig, {
      optimization: {
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              output: {
                comments: false,
              },
            },
          }),
        ],
      },
    });
  

設定による出力ファイルの違い

option 指定の違いで出力ファイルに差があったので、以下 Gist に ファイルをアップしました。
TerserPlugin の、JavaScript の option 指定の違いでコメント出力の変化を確認する

• extractCommentsに 'all' を指定する場合
  コメントが除去された JavaScript ファイルと、LICENCE 情報のみ抽出されたファイルが出力されました。
  JavaScript の一行目には、LICENCE は 別ファイルに記載がある旨のコメントが付与されます。

• terserOptions.output.comments に false を指定する場合
  コメントが除去された JavaScript ファイルだけが出力されました。

• terserOptions.output.comments に all を指定する場合
  出力が異なったので、気になって実行してみたところ、コメントが除去されず全て JavaScript ファイル内に出力されました。

コメントは削除するにしても、ライセンスファイルの在りかは、明示しておくのが礼儀正しいと思いましたので、extractCommentsに 'all' を指定してコメントは除去しようかと思います。

console.log の出力を除去する

TerserPlugin で console.log の出力も削除できるようなので、そちらも設定しました。
terserOptions.compress.drop_console を true にすると、conosole.log の記述が JavaScript から削除されます。

const Merge = require("webpack-merge");
const BaseConfig = require("./webpack.base.config.js");
const TerserPlugin = require('terser-webpack-plugin');   

module.exports = Merge(BaseConfig, {
    plugins: [],        
    optimization: {
        minimizer: [
        new TerserPlugin({
            extractComments: 'all',
            terserOptions: {
                compress: {
                  drop_console: true,
                },
            },            
        }),
        ],
    },
});

参考

以下、参考になりました。

• Webpack 4 production モードで console.log を削除したい - かもメモ
• webpack@4のmodeとminimize(UglifyJS) - 30歳からのプログラミング
• webpack 4 入門 - Qiita
• reactjs - remove console.logs with Webpack & Uglify - Stack Overflow

以上です。