【設定方法】Next.jsでterser-webpack-pluginを設定し本番ビルド時にコメントとconsole.logを削除するサンプルコード

Next.jsReactwebpack
【設定方法】Next.jsでterser-webpack-pluginを設定し本番ビルド時にコメントとconsole.logを削除するサンプルコード
Memo

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-pluginyarnコマンドでインストールします。
※ npmでインストールする場合は適宜置き換えてください。

terminal
$ yarn add -D terser-webpack-plugin

webpackをインストール

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

terminal
$ yarn add -D webpack

dotenvをインストール

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

terminal
$ yarn add -D dotenv

.envの設定

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

env
# 本番 STAGE=production

next.config.jsの設定

全体のコード

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

next.config.js
const 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.js
const path = require("path"); const TerserPlugin = require('terser-webpack-plugin'); const dotenv = require("dotenv"); const webpack = require("webpack");

dotenvの読み込み

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

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

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

webpackの設定に追加する

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

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

terser-webpack-pluginの設定

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

コンソールログ削除

terserOptions: {
  compress: { drop_console: true }
}

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

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

{
  extractComments: "all"
}

プラグインの設定

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

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

再ビルド・起動して確認

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

$ yarn next build && yarn next start

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

参考文献

終わりに

最後までご覧いただきありがとうございます。
この記事では【設定方法】Next.jsでterser-webpack-pluginを設定し本番ビルド時にコメントとconsole.logを削除するサンプルコードについて紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。