Webpackの圧縮プラグインには「terser-webpack-plugin」
開発環境でJavaScriptを編集する際は別に問題ないのですが、Webpackで生成したファイルはサイズが結構大きくなってしまう場合がありませんか？
また、確認の際によく使用されるコンソールメソッドがありますが、これらも実用環境では削除されている方がいいでしょう。
そこでWebpackでファイルを生成する際に、スクリプトコードの圧縮と、コンソールメソッドも取り除いてしまう設定方法の紹介です。
基本的な圧縮機能を備えたプラグインを使用したオプションの設定方法の紹介ですので、ご存知の方はスキップして問題ない筈です。
ただ、Webpackの圧縮プラグインを検索するとまだ「uglifyJs」を使った方法を紹介する記事が引っかかりますので、念のために書いています。
「terser-webpack-plugin」のインストールと使い方
「terser」という優れものツール（「uglify-es」フォークで「uglifyJs」を含む、コマンドラインツールやAPIを保持）を使用しているWebpackプラグインで、個人的に一番簡単で妥当な圧縮プラグインだと思います。
Webpackの公式サイトでも紹介されているプラグインですので、サポート有りだと判断して良い筈です。
インストールはターミナルで以下のコマンドを入力。
npm install terser-webpack-plugin --save-devあとはWebpackの設定ファイルに書き込むだけです。
const _optimization = {
minimizer: [
new TerserPlugin()
]
};
module.exports = {
//mode, entry, output, などなど
optimization: _optimization
};
という形で、キー「optimization」の「minimizer」にセットします。
あとはオプションで「uglifyJs」のように「drop_console」を「true」にセットすれば、「console.log」は削除されます。
var optimization = {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: { drop_console: true }
},
}),
]
};
この他にも「uglifyJs」などの機能を引き継いでいますので、使用するプラグイン名を変更するだけでそのまま使えますから楽ですよ。
上に書いた設定ファイルの書き方では省略していますが、モードが「production」の場合という条件を設けておき、殆どの場合はソースマップも取り除いてしまって良いんじゃないでしょうか？
「uglifyjs-webpack-plugin」はES6+非対応
まず、「uglifyjs-webpack-plugin」がどんなプラグインかというと、「uglifyJs」という圧縮ツールをWebpackに適用させるプラグインです。生成されるJavaScriptファイルを圧縮する際に使用されるもので、１行にギュギュッと纏めてくれたりします。
僕も最初見つけた際はテストコード（適当なconsole.logのみのファイルまど）を書いて試して問題なかったので、そのままこのプラグインを使っていこうと思っていたのですが、実際に何かを作ろうとしてこのプラグインを使用して処理しようとするとエラーが起こりました。
内容を読んでみると、ES6に非対応ということで、調べてみましたがやはり更新を待つか別の方法を探すしか無いようでした。
実際にはオプションでecmaのバージョン値を指定することが可能だとどこかで見た気がしますが、面倒だという感覚でコードが増える度に注意を払うことを考えるととても管理しきれない気がします。
もしかしたら一度生成したファイルに再度処理をかけて取り除く方法も残されていた気はしますが、結局別の方法を探して試したところ「console.log」を取り除くプラグインが見つかりました。
「uglify-es」はメンテナンスされていない
「uglifyJs」をES6に対応させた同様の圧縮ツール「uglify-es」というプラグインがありますが、メンテナンスが行き届いていないようで、スクリプトのバージョンに対応しないようになると困りますので、この選択肢は外しておいたほうが無難だと判断しました。
何故かこれも、僕が方法を検索している間に何度か見かけました。
ええ、使わない方が良いです。
という訳で、探せば他のプラグインも見つかるかもしれませんが、「terser」を使うのが無難ではないかと。
