Microsoftが無償で配布しているエディタのVSCode(Visual Studio Code)はとても便利です。
今回、VSCodeを利用してJavaScript、CSSを圧縮・軽量化(Minify)する方法を解説します。
Minify(ミニファイ)とは
Minify(ミニファイ)とは、JavaScriptやCSSなどのコードの中の不要な改行、インデントなどを削除し、動作はそのままで圧縮・軽量化することです。
基本的にMinifyしたJavaScriptやCSSは、ファイル名に「min」を付加して区別します。
※ファイル名の例 | 通常のファイル名 | minify後のファイル名 |
---|---|---|
JavaScript(.jsファイル) | jquery.js | jquery.min.js |
CSS(.cssファイル) | style.css | style.min.css |
JS & CSS Minifer をインストール
VSCodeでMinifyを行う際は、「JS & CSS Minifer」というプラグインをインストールして利用します。
まず、左メニューの「Extensions」ボタンをクリックします。※Ctrl+Shift+XでもOKです。

Marketplaceの拡張機能検索フォームに「JS & CSS Minifer」と入力して検索し、リストに表示された「JS & CSS Minifer」をクリックします。

メイン画面に「JS & CSS Minifer」の詳細が表示されますので、緑色の「Install」ボタンをクリックします。

緑色の「Install」ボタンが青色の「Uninstall」に変われればインストール完了です。
Minify(圧縮)を実行
jsファイルのMinifyを実行してみます。(※test.jsというファイルでテストを行います。)
Minifyしたいファイル(今回はtest.js)をVSCodeで開いて、下にある「Minify」をクリックします。

Minifyが成功すると一瞬以下のような圧縮したパーセントが表示されます。(※失敗した場合はエディタ画面が分割されてエラーの詳細が表示されます。)

Minifyが成功し、元のファイルと同じフォルダ内に「test.min.js」が作成されました。

Minify後(圧縮後)のファイルも試しに見てみます。

問題ありません。正常にMinifyされています。
【おまけ】逆にコードフォーマット(整形)をしたい場合
Minify(圧縮)したjsファイル等を元に戻したい場合は、「JS & CSS Minifer」をインストールしたのと同じ手順で「Prettier – Code formatter」というプラグインをインストールします。

コードフォーマットしたいファイルを開き、右クリックから2つある「ドキュメントをフォーマット」の下のほうをクリックします。

「既存のフォーマッタを構成…」をクリックします。

「Prettier – Code formatter」をクリックしてします。

すると、「Prettier – Code formatter」が既定のフォーマッタに指定されますので、以降は、Ctrl+Alt+Fにてコードフォーマット(整形)が行えます。※右クリックから上のほうの「ドキュメントをフォーマット」でもOKです。
試しに先ほどMinify(圧縮)したjsファイルをコードフォーマットで元に戻してみます。


正常に元に戻りました。
以上で解決です!