CursorエディタやVSCodeの拡張機能「Minify」を使えば、CSSやJavaScriptファイルを簡単に圧縮して軽量化できます。圧縮することで読み込み速度を向上させ、Webサイトのパフォーマンス改善にもつながります。本記事では「Minify」のインストール方法と使い方、さらに自動で圧縮できる設定方法も解説します。
Minifyとは？
「Minify」はCursorエディタやVisual Studio Code（VSCode）で利用できる拡張機能で、JavaScriptやCSSファイルを圧縮・軽量化することができます。コード内の不要なスペースや改行、コメントを削除し、最適化された軽量なファイルを自動生成してくれる便利なツールです。
Minifyのインストール方法
Minifyの導入はとても簡単です。以下の手順でインストールできます。
- CursorやVSCodeの左サイドバーにある「拡張機能」アイコンをクリック
- 検索窓にMinifyと入力
- 「Nu-Minify」という拡張機能が表示されるので「インストール」をクリック
これで準備完了です。
Minifyの使い方
Minifyでファイルを圧縮する方法は非常にシンプルです。
JavaScriptファイルの圧縮
- 圧縮したいJavaScriptファイルをCursorまたはVSCodeで開く
- Windowsの場合は「F1」キーを押してコマンドパレットを開く
- 検索窓に「minify」と入力
- 表示された「Minify」コマンドを選択して実行
実行すると、元のファイルと同じ場所に圧縮済みの.min.jsファイルが生成されます。
CSSファイルの圧縮
- 圧縮したいCSSファイルをCursorまたはVSCodeで開く
- F1キーを押してコマンドパレットを開く
- 「minify」と検索し、同様にコマンドを実行
こちらも同じく.min.cssファイルが生成されます。
自動で圧縮するオートセーブ設定
毎回手動で「minify」コマンドを実行しなくても、自動保存時に自動で圧縮される設定があります。設定方法は以下の通りです。
- 拡張機能「Nu-Minify」の横にある歯車アイコン（設定ボタン）をクリック
- 表示されたメニューから「拡張機能の設定」を選択
- 「Minify: Minify Existing On Save」のチェックボックスにチェックを入れる
これでファイルを保存するたびに、自動で.minファイルが生成されるようになります。
さいごにまとめ
CursorやVSCode拡張機能「Minify」を使えば、CSSやJavaScriptファイルを簡単に圧縮し、Webサイトの読み込み速度を改善できます。さらに、オートセーブ設定を有効化することで、保存のたびに自動的に圧縮が行われるため、作業効率が大幅にアップします。Web制作やフロントエンド開発の効率化にぜひ取り入れてみてください。