みったに

JSとCSSをVSCodeで圧縮する簡単な方法【無料の便利ツール】

CODE PROGRAMMING

こんにちは、みったにです。

CSSやJSは圧縮(Minify)すると、Webサイトのパフォーマンスが向上します。そして、パフォーマンスが向上すると、サイトが高速化し、SEOにも良い影響を与えます。

とはいえ、こういった悩みもありますよね。

  • JSやCSSを圧縮したいけど簡単に済ませたい
  • Webサイトのパフォーマンスをもう少し上げたいな

今回はこういったお悩みをお持ちの方に朗報です。VSCodeの拡張機能を使用した解決策をご提案いたします。

JSとCSSをVSCodeで圧縮する簡単な方法

いきなりですが、今回は以下の機能を使用します。

JS & CSS Minifier

この機能でCSSやJSを圧縮していきます。
※この機能は無料です

JS & CSS Minifierの公式サイトはこちら

JS & CSS Minifierとは

簡単にいうと、VSCodeが使用できる圧縮用の拡張機能です。

VSCodeは必須

すみません、今回の機能はVSCodeが必要です。

以下でダウンロードできます。よろしければ、こちらからダウンロード下さいませ。
>>VSCodeのダウンロードはこちら

では、圧縮するまでの手順を説明しますね。

JS & CSS Minifierをインストール

まずは、VSCodeを開いて、「JS & CSS Minifier」をインストールします。

インストール手順

上記の画像に沿って、①〜④の順番で実行します。

①ここをクリック

左側の四角が並んでいるボタン(Extensionsボタン)をクリックし、拡張機能を選択する画面に移行します。

②JS & CSS Minifierを入力

拡張機能の検索フォームで「JS & CSS Minifier」と入力し、Enterを押下します。

③JS & CSS Minifierを選択

②でEnterを押下したら、「JS & CSS Minifier」を探してクリックします。

④Installを押下

最後にInstallを押下したら完了です。Installが完了したら「Install」と書かれた緑色のボタンが「アンインストール」と書かれた灰色のボタンに切り替わります。

インストールはこれで完了です。

VSCodeで圧縮してみよう

実際にコードを圧縮してみます。

圧縮手順

以下の画像の通り、「Minify」をクリックするだけです。超簡単ですね。

圧縮中は「Minify」の右側に以下のような、赤枠で囲った画面が出力されます。この部分が消えたら次に進みます。

圧縮の確認

それでは、圧縮が完了しているか見てみましょう。

こんな感じで、min.cssファイルが生成されていれば、圧縮完了です。
あとは、HTMLファイルとかで、「.css」ファイルではなく、「.min.css」ファイルを読み込むようにしておけばOKです。

VSCodeの拡張機能を使うことで、CSSやJSの圧縮も簡単にできましたね。
これでサイトのパフォーマンスも向上するはずです。