VSCodeの拡張機能「Minify」でCSSやJSファイルを圧縮・軽量化する

Webサイト制作で気になる項目として、Webページの表示速度の改善は心がけていることでしょう。いろんな改善策がある中で、ソースコードも文字数からスペース、改行など、様々な情報がデータの量としてファイルサイズが決まってきますので、情報の量が多ければファイルサイズも大きくなります。
読み込むファイル数もそうですが1つのファイルとしても、ファイルサイズが大きいと若干読み込みが遅くなるので表示速度に影響してきます。
Webページで読み込むファイルのサイズは、なるべく小さくしておきたいところです。

コードファイルでおもに改善していくところは、CSSやJavaScriptのファイルになるでしょう。
多くの方がMicrosoft製のコードエディタのVisual Studio Codeを利用されているかと思いますが、ここでは、手軽にCSSファイルやJSファイルを圧縮して軽量化できる、Visual Studio Codeの便利な拡張機能「Minify」をご紹介します。
Minifyという拡張機能では、手軽にCSSやJSファイルを圧縮でき、もとファイルとは別の圧縮版のファイルを生成してくれます。

VSCodeでは他にも、「JS & CSS Minifier」という有名な拡張機能があり、当サイトの『VSCodeの拡張機能「JS & CSS Minifier」でファイルを圧縮・軽量化する』の記事でもご紹介してきましたが、2023年に入っていつからか非推奨となったようで、今のところ動作は問題ありませんが、VScodeの更新でいつ動かなくなるかはわかりません。

既に「JS & CSS Minifier」をご利用の方も、ファイルを圧縮できる拡張機能をこらから使っていこうと考えて探していた方も、こちらでご紹介する拡張機能「Minify」を利用していくといいでしょう。

それでは拡張機能のインストールから、Minifyの使い方について見ていきます。
macOSで説明していきますが、Windows PCも流れは同じです。

拡張機能「Minify」のインストール

エディタの左メニューの拡張機能のアイコンを選択し、検索窓に「Minify」と入力します。
拡張機能の一覧にMinifyが表示されますので、一覧の「Install」ボタン、または詳細のボタンからインストールします。

インストールができましたら準備はOKです。

CSS、JSファイルの圧縮・軽量化

ファイルの圧縮には、拡張機能のコマンドを実行します。
コマンドといっても使い方は簡単で、圧縮したいCSSやJSファイル上で、「fn + F1」または「shift + command + P」でコマンドパレットを表示し、「Minify」と入力して選択されているMinifyのコマンドをクリック、またはEnterキーで実行します。
Windowsの場合は、「F1」または「shift + ctrl + P」でコマンドパレットが表示できます。
また、ショートカットキーでなくても、エディタのツールバーの「表示」から「コマンドパレット」を選択してもOK。

サンプルではJSファイルを圧縮しています。