VSCodeでJavaScript,CSSを圧縮・軽量化(Minify)する

VSCodeでJavaScript,CSSを圧縮・軽量化(Minify)する PC

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です。

VSCodeの「Extensions」ボタンをクリック

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

「JS & CSS Minifer」を検索してクリック

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

「JS & CSS Minifer」の「Install」をクリック

緑色の「Install」ボタンが青色の「Uninstall」に変われればインストール完了です。

スポンサーリンク

Minify(圧縮)を実行

jsファイルのMinifyを実行してみます。(※test.jsというファイルでテストを行います。)

Minifyしたいファイル(今回はtest.js)をVSCodeで開いて、下にある「Minify」をクリックします。

VSCodeでMinifyを実行

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

Minifyで圧縮したパーセント表示

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

Minifyされたjsファイルが作成される

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

Minify後(圧縮後)のファイル内容

問題ありません。正常にMinifyされています。

スポンサーリンク

【おまけ】逆にコードフォーマット(整形)をしたい場合

Minify(圧縮)したjsファイル等を元に戻したい場合は、「JS & CSS Minifer」をインストールしたのと同じ手順で「Prettier – Code formatter」というプラグインをインストールします。

「Prettier - Code formatter」のインストール

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

右クリックから「ドキュメントをフォーマット」をクリック

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

「既存のフォーマッタを構成...」をクリック

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

「Prettier - Code formatter」をクリック

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

試しに先ほどMinify(圧縮)したjsファイルをコードフォーマットで元に戻してみます。

コードフォーマット前

Ctrl+Alt+Fにてコードフォーマット実行

正常に元に戻りました。

以上で解決です!