Next.jsで作ったアプリケーションの
コメントとconsole.logを本番ビルド時に削除したかったため
terser-webpack-pluginをインストールして設定したので
手順としてやり方をメモします。

terser-webpack-pluginとは

tenrserを利用して
JavaScriptを圧縮するWebpackのプラグインになります。

UglifyJSが非推奨

もともとuglifyjs-webpack-pluginというプラグインもあったのですが
非推奨になったようなので今後の選択肢としてtenrserを利用します。

環境

• React 17.0.2
• Next.js 7.0

必要なパッケージのインストール

terser-webpack-pluginをインストール

terser-webpack-plugin をyarnコマンドでインストールします。
※ npmでインストールする場合は適宜置き換えてください。

terminalCopy code$ yarn add -D terser-webpack-plugin

webpackをインストール

next.jsはwebpackが内包されているため
設定を変更する場合は別途インストールします。

terminalCopy code$ yarn add -D webpack

dotenvをインストール

本番判定をする際に環境変数を .env で管理していたため
dotenvをインストールしています。 modeやNODE_ENVをを利用している場合は適宜置き換えてください。

terminalCopy code$ yarn add -D dotenv

.envの設定

.envに環境を記載します。 本番用は下記のようにSTAGE変数へproductionを設定しています。

.envCopy code
# 本番
STAGE=production

next.config.jsの設定

全体のコード

先に全体のコードを記載します。 解説はこの後に記載させていただいています。

next.config.jsCopy codeconst path = require("path");
const TerserPlugin = require('terser-webpack-plugin');
const dotenv = require("dotenv");
const webpack = require("webpack");

dotenv.config({ path: path.resolve(".env") });

module.exports =  webpack(config, options) {
  if (process.env.STAGE && process.env.STAGE === 'production'){
    config.optimization.minimize = true;
    config.optimization.minimizer = [
      new TerserPlugin({
        terserOptions: {
          compress: { drop_console: true }
        },
        extractComments: "all"
      })
    ];
  }
  return config;
}

コードの解説

インストールしたパッケージの読み込み

requireでインストールしたパッケージを読み込みます。

next.config.jsCopy codeconst path = require("path");
const TerserPlugin = require('terser-webpack-plugin');
const dotenv = require("dotenv");
const webpack = require("webpack");

dotenvの読み込み

.envに記載した変数を読み込みます。

next.config.jsCopy codedotenv.config({ path: path.resolve(".env") });

アクセスは process.env.変数名で取得できます。

webpackの設定に追加する

configの引数からnext.jsで隠蔽されている設定が取得できるため
ここに terser-webpack-pluginの設定を追記します。

next.config.jsCopy codewebpack(config, options) {
  console.log(config);
  // webpackの設定が確認できる
}

terser-webpack-pluginの設定

コンソールログの削除とコメント削除を設定しています。

コンソールログ削除

yamlCopy codeterserOptions: {
  compress: { drop_console: true }
}

コメント削除するオプション

LICENCE 情報を残してその他のコメントを削除します。

cssCopy code{
  extractComments: "all"
}

プラグインの設定

next.config.jsCopy codeconfig.optimization.minimize = true;
config.optimization.minimizer = [
  new TerserPlugin({
    terserOptions: {
      compress: { drop_console: true }
    },
    extractComments: "all"
  })
];

オプションについて詳しくはGithub｜Options｜webpack-contrib/terser-webpack-pluginをご確認ください。

再ビルド・起動して確認

本番用のビルド・起動を実行して確認します。

rubyCopy code$ yarn next build && yarn next start

ビルド・起動が完了したらアプリケーションを開いて
aliasが指定した通りに設定されていること確認します。

参考文献

• Github | webpack-contrib/terser-webpack-plugin
• next.js公式ドキュメント| next.config.js