MENU
contact

VSCodeでコードをminifyする方法

VSCode

採用はこちら

VSCodeでJavaScriptやCSS、HTMLなどのコードをminifyしたい場合は、外部のminifyツールやビルドツールを利用するのが一般的です。

VSCodeそのものに、JavaScript・CSS・HTMLをまとめてminifyする汎用的な標準機能が用意されているわけではありません。

そのため、Terserやesbuild、html-minifier-terserなどをVSCodeのターミナルから実行したり、npm scriptsやVSCode Tasksと組み合わせたりしてminifyします。

単発でコードを圧縮するだけであればコマンドを直接実行する方法でも問題ありません。

一方、WebサイトやWebアプリを継続的に開発する場合は、npm scriptsやビルドツールを利用して自動化しておくと管理しやすくなります。

目次

minifyとは

minifyとは、プログラムの動作に不要な空白や改行、コメントなどを削除し、コードのファイルサイズを小さくする処理です。

日本語では「圧縮」や「最小化」と表現されることもあります。

JavaScriptをminifyした例

たとえば、次のJavaScriptがあるとします。

function add(a, b) {
  return a + b;
}

console.log(add(10, 20));

minifyすると、次のような形になります。

function add(d,n){return d+n}console.log(add(10,20));

実際の出力結果は使用するminifierや設定によって異なります。

ツールによっては、単純に空白や改行を削除するだけではなく、変数名の短縮や不要な処理の削除、構文の短縮なども行われます。

minifyするメリット

minifyする主なメリットは、ファイルサイズを小さくできることです。

JavaScriptやCSS、HTMLのデータ量が減ることで、Webサーバーからブラウザへ転送するデータ量を減らせます。

ただし、Webサイトの表示速度はminifyだけで決まるわけではありません。

実際のWebサイトでは、Brotliやgzipによる通信圧縮、キャッシュ、画像最適化、不要なJavaScriptの削減、コード分割なども重要になります。

VSCodeでminifyする主な方法

VSCodeでminifyする方法はいくつかあります。

代表的なのは次の方法です。

ターミナルからminifierを実行する

もっとも基本的な方法です。

VSCodeに搭載されている統合ターミナルから、Terserやesbuildなどのコマンドを実行します。

環境をVSCodeに依存させにくく、ほかのエディタやCI環境でも同じコマンドを利用できるのがメリットです。

npm scriptsから実行する

毎回長いコマンドを入力するのではなく、package.jsonのscriptsへminify処理を登録する方法です。

たとえば、次のようなコマンドにまとめられます。

npm run build

複数人で開発する場合やGitでプロジェクトを管理する場合には、特に便利な方法です。

VSCode Tasksから実行する

VSCodeには、コマンドやnpm scriptsをエディタから呼び出せるTasks機能があります。

npm scriptsとして登録したminify処理をVSCode Tasksから実行することも可能です。

VSCode拡張機能を利用する

VSCode Marketplaceには、JavaScriptやCSS、HTMLをminifyできる拡張機能もあります。

簡単なファイルを手動で圧縮したい場合には便利です。

ただし、本番用のビルド処理をVSCode拡張機能だけに依存すると、開発者ごとの環境差が発生しやすくなります。

継続的な開発では、npm scriptsやビルドツールを利用したほうが再現性を高めやすいでしょう。

JavaScriptをTerserでminifyする方法

JavaScriptをminifyする代表的なツールのひとつがTerserです。

Terserでは、JavaScriptの圧縮や変数名などの短縮を行えます。

Node.jsが利用できるか確認する

Terserをnpmから利用する場合は、Node.js環境が必要です。

VSCodeのメニューから「ターミナル」→「新しいターミナル」を開き、次のコマンドを実行します。

node -v

続いて、npmも確認します。

npm -v

バージョン番号が表示されれば、Node.jsとnpmを利用できます。

Terserをインストールする

プロジェクト単位でTerserを利用する場合は、プロジェクトフォルダで次のコマンドを実行します。

npm install --save-dev terser

--save-devを指定すると、開発時に使用する依存パッケージとしてdevDependenciesへ登録されます。

JavaScriptをminifyする

たとえば、次のファイルを圧縮するとします。

src/app.js

出力先を次のファイルにします。

dist/app.min.js

次のコマンドを実行します。

npx terser src/app.js -c -m -o dist/app.min.js

-cは圧縮処理を有効にするオプションです。

-mは識別子を短くするmangle処理を有効にします。

-oは出力ファイルを指定するためのオプションです。

Terserのトップレベルmangleには注意する

通常の-mでは、トップレベルにある変数名や関数名が必ず短縮されるわけではありません。

トップレベルまで対象にする場合は、次のように--toplevelを指定できます。

npx terser src/app.js -c -m --toplevel -o dist/app.min.js

ただし、トップレベルの変数や関数を外部のコードから参照している場合は、名前が変わることで問題が発生する可能性があります。

必要性を理解したうえで利用することが重要です。

mangle-propsは慎重に利用する

Terserには、オブジェクトのプロパティ名まで短縮する--mangle-propsという機能もあります。

ただし、通常の-mよりもコードへ与える影響が大きく、設定によっては正常に動作しなくなる可能性があります。

特別な理由がなければ、最初は次のような一般的な設定から利用するのが安全です。

npx terser src/app.js -c -m -o dist/app.min.js

esbuildでJavaScriptをminifyする方法

JavaScriptを高速に処理したい場合は、esbuildも便利です。

esbuildはJavaScriptだけでなく、TypeScriptやCSSなども扱えるビルドツールです。

bundleとminifyをまとめて行いたい場合にも適しています。

esbuildをインストールする

次のコマンドを実行します。

npm install --save-dev esbuild

JavaScriptをminifyする

単純にJavaScriptをminifyする場合は、次のように実行できます。

npx esbuild src/app.js --minify --outfile=dist/app.min.js

--minifyを指定すると、空白の削減や構文の短縮、識別子の短縮などが行われます。

ただし、トップレベルの識別子は、状況によってはそのまま残ることがあります。

外部コードとの互換性を保つためです。

bundleとminifyを同時に行う

複数のJavaScriptモジュールを利用している場合は、次のように--bundleを付けると便利です。

npx esbuild src/app.js --bundle --minify --outfile=dist/app.min.js

--bundleを指定すると、importなどで読み込まれている依存モジュールをまとめて出力できます。

イメージとしては次の流れです。

複数のJavaScriptファイル
↓
bundle
↓
minify
↓
dist/app.min.js

WebサイトやWebアプリの本番用JavaScriptを生成する場合には、よく利用される構成です。

esbuildでCSSをminifyする方法

esbuildはCSSのminifyにも対応しています。

たとえば、次のCSSを圧縮するとします。

src/style.css

次のコマンドを実行します。

npx esbuild src/style.css --minify --outfile=dist/style.min.css

これによって、不要な空白や改行などが削減されたCSSが生成されます。

JavaScriptとCSSの両方に同じツールを利用したい場合には、esbuildは扱いやすい選択肢です。

esbuildでtargetを指定する方法

JavaScriptをminifyするときは、どのブラウザやJavaScript環境を対象にするかも重要です。

esbuildでは、--targetを指定できます。

たとえば、ES2020相当をターゲットとする場合は次のようにします。

npx esbuild src/app.js --bundle --minify --target=es2020 --outfile=dist/app.min.js

targetを指定しない場合、コードサイズを小さくするために比較的新しいJavaScript構文が利用されることがあります。

古いブラウザまで対応する必要がある場合は、対象環境に応じてtargetを検討します。

targetとpolyfillは別物

ここは特に注意したいポイントです。

esbuildのtargetは、主にJavaScriptの構文を対象環境に合わせて変換するための機能です。

一方、次のようなJavaScript APIそのものを自動的に追加する機能ではありません。

Promise
fetch
Array.prototype.flat

古いブラウザでも新しいAPIを利用したい場合は、必要に応じてpolyfillを別途検討します。

つまり、次のように役割が異なります。

target
→ JavaScript構文の互換性

polyfill
→ JavaScript APIの互換性

HTMLをminifyする方法

HTMLをminifyしたい場合は、html-minifier-terserなどのツールを利用できます。

html-minifier-terserをインストールする

次のコマンドを実行します。

npm install --save-dev html-minifier-terser

HTMLをminifyする

たとえば、次のHTMLを圧縮するとします。

src/index.html

出力先を次のようにします。

dist/index.html

Windows環境でも扱いやすいように1行で書くと、次のようになります。

npx html-minifier-terser src/index.html --collapse-whitespace --remove-comments -o dist/index.html

--collapse-whitespaceは余分な空白を削減するオプションです。

--remove-commentsはHTMLコメントを削除します。

HTMLのminifyは表示崩れに注意する

HTMLはJavaScriptやCSS以上に、minifyの設定へ注意が必要です。

HTMLでは空白が画面表示に影響するケースがあるためです。

たとえば、次のHTMLがあります。

<span>Hello</span> <span>World</span>

2つのspanタグの間にある空白は、ブラウザ上の表示にも影響します。

そのため、collapseWhitespaceなどの設定によっては意図しない表示になる可能性があります。

最初は比較的安全な設定から始め、必ず実際のブラウザで動作確認することが重要です。

npm scriptsでminifyを自動化する方法

毎回長いコマンドを入力するのは効率的ではありません。

そこで、package.jsonのscriptsへminify処理を登録すると便利です。

JavaScript・CSS・HTMLを登録する

たとえば、次のように設定できます。

{
  "scripts": {
    "minify:js": "terser src/app.js -c -m -o dist/app.min.js",
    "minify:css": "esbuild src/style.css --minify --outfile=dist/style.min.css",
    "minify:html": "html-minifier-terser src/index.html --collapse-whitespace --remove-comments -o dist/index.html"
  }
}

JavaScriptだけminifyする場合は、次のコマンドです。

npm run minify:js

CSSの場合は次のようにします。

npm run minify:css

HTMLの場合は次のとおりです。

npm run minify:html

すべてまとめてminifyする

複数の処理をまとめたい場合は、さらにminifyスクリプトを追加します。

{
  "scripts": {
    "minify:js": "terser src/app.js -c -m -o dist/app.min.js",
    "minify:css": "esbuild src/style.css --minify --outfile=dist/style.min.css",
    "minify:html": "html-minifier-terser src/index.html --collapse-whitespace --remove-comments -o dist/index.html",
    "minify": "npm run minify:js && npm run minify:css && npm run minify:html"
  }
}

これで、次のコマンドだけでまとめて実行できます。

npm run minify

処理のイメージは次のとおりです。

JavaScript
↓
CSS
↓
HTML
↓
minify完了

静的なWebサイトなどであれば、比較的シンプルで扱いやすい構成です。

VSCode Tasksからminifyする方法

npm scriptsへ登録したminify処理は、VSCodeのTasks機能から呼び出すこともできます。

tasks.jsonを作成する

プロジェクト内に次のファイルを作成します。

.vscode/tasks.json

たとえば、次のように設定します。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Minify",
      "type": "npm",
      "script": "minify",
      "problemMatcher": []
    }
  ]
}

この設定では、package.jsonに登録した次のスクリプトが呼び出されます。

"minify": "npm run minify:js && npm run minify:css && npm run minify:html"

Tasks: Run Taskから実行する

WindowsやLinuxの場合は、次のショートカットでコマンドパレットを開きます。

Ctrl + Shift + P

次に、次のコマンドを選択します。

Tasks: Run Task

その後、登録したMinifyを選択すると実行できます。

Ctrl + Shift + Bから実行できるようにする

WindowsやLinuxでは、Ctrl + Shift + Bが「Run Build Task」に割り当てられています。

minify処理をBuild Taskとして扱う場合は、groupを設定しておくとわかりやすくなります。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Minify",
      "type": "npm",
      "script": "minify",
      "problemMatcher": [],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

このようにデフォルトのBuild Taskとして登録しておけば、Ctrl + Shift + Bから実行しやすくなります。

VSCode拡張機能でminifyする方法

VSCode Marketplaceには、minifyを行うための拡張機能もあります。

拡張機能画面で「minify」などのキーワードを検索すれば、JavaScript・CSS・HTMLに対応した拡張機能を見つけられます。

拡張機能が向いているケース

次のような用途であれば、拡張機能は手軽です。

単発でファイルをminifyしたい

簡単なHTMLやCSSだけ圧縮したい

コマンドを入力せずに処理したい

本番ビルドではnpm scriptsのほうが管理しやすい

Webサイトを継続的に運用する場合は、VSCode拡張機能だけに依存するよりも、npm scriptsやビルドツールへ設定を残す方法が適しています。

たとえば、次のファイルをGitで管理できます。

package.json
package-lock.json
.vscode/tasks.json

これにより、ほかの開発者やCI環境でも同じminify処理を実行しやすくなります。

Viteやwebpackを使用している場合

ReactやVueなどのWebアプリでは、Viteやwebpackなどのビルドツールを利用しているケースも多いでしょう。

その場合、手作業でJavaScriptやCSSを個別にminifyする必要がないことがあります。

ビルド時にminifyされる場合がある

一般的な本番ビルドでは、次のような処理が行われます。

src
↓
bundle
↓
最適化
↓
minify
↓
dist

そのため、プロジェクトによっては次のコマンドだけで本番用ファイルを生成できます。

npm run build

Viteやwebpackなどを利用しているプロジェクトでは、まず既存のビルド設定を確認したほうがよいでしょう。

すでにminifyされているにもかかわらず、さらに別のminifierを実行すると、管理が複雑になる可能性があります。

元ファイルを直接minifyしないほうがよい

minify後のコードは、人間にとって非常に読みにくくなります。

そのため、開発中の元ファイルへ直接上書きする運用は避けたほうがよいでしょう。

srcとdistを分ける

たとえば、次のような構成にします。

project/
├─ src/
│ ├─ app.js
│ └─ style.css
│
└─ dist/
   ├─ app.min.js
   └─ style.min.css

srcには編集する元コードを保存します。

distには、本番公開用として生成されたファイルを保存します。

イメージとしては次のとおりです。

src
→ 開発用

dist
→ 配布・公開用

ただし、srcやdistというフォルダ名は必須ではありません。

プロジェクトによってbuildやpublicなど異なる名前が使われることもあります。

minifyとフォーマットの違い

VSCodeでは、minifyとコードフォーマットを混同しないようにすることも重要です。

フォーマットとは

たとえば、次のコードがあるとします。

function hello(){console.log("Hello");}

フォーマッターを利用すると、次のように読みやすくできます。

function hello() {
  console.log("Hello");
}

Prettierなどは、こうしたコードの整形を目的としたツールです。

minifyとは

一方、minifyは逆方向の処理です。

function hello() {
  console.log("Hello");
}

を、次のように小さくします。

function hello(){console.log("Hello")}

そのため、役割は次のように整理できます。

Format
→ 人間が読みやすいコードにする

Minify
→ 配信するコードを小さくする

PrettierとTerserは競合するツールではなく、目的が異なります。

開発中はPrettierなどで読みやすく整形し、本番ビルド時にTerserやesbuildでminifyするという使い方ができます。

minifyするならSource Mapも検討する

JavaScriptをminifyすると、元コードとの対応関係がわかりにくくなります。

そのため、本番環境でエラーが発生したときに原因を特定するのが難しくなることがあります。

そこで利用されるのがSource Mapです。

esbuildでSource Mapを生成する

たとえば、次のように指定できます。

npx esbuild src/app.js --bundle --minify --sourcemap --outfile=dist/app.min.js

このようにすると、一般的にはJavaScript本体とSource Mapファイルが生成されます。

app.min.js
app.min.js.map

ブラウザの開発者ツールなどでは、Source Mapを利用して元ソースとの対応関係を確認できます。

Source Mapの公開範囲にも注意する

Source Mapには元コードに関する情報が含まれます。

そのため、公開サイトでSource Mapをそのまま配信するかどうかは、プロジェクトのセキュリティ方針や運用方針に合わせて判断する必要があります。

Terserとesbuildの違い

JavaScriptをminifyする場合、Terserとesbuildのどちらを選べばよいか迷うことがあります。

両者は似ていますが、得意分野が少し異なります。

Terserが向いているケース

TerserはJavaScriptのminify専用ツールとして細かな設定を行いたい場合に向いています。

次のような用途で利用しやすいでしょう。

JavaScriptを細かく圧縮したい

compress設定を調整したい

mangle設定を細かく制御したい

esbuildが向いているケース

esbuildはビルド全体を高速に処理したい場合に便利です。

次のような用途があります。

JavaScriptを高速にminifyしたい

複数モジュールをbundleしたい

TypeScriptも扱いたい

CSSも同じツールで処理したい

単純化すると、次のように考えられます。

細かなJavaScript圧縮設定
→ Terser

高速なビルド・bundle・minify
→ esbuild

ただし、どちらを使えば必ずファイルサイズが小さくなるというものではありません。

コードの内容や設定によって結果は変わります。

minify後は必ず動作確認する

minifyツールは安全性を考慮して設計されていますが、コードの書き方によってはminify後に問題が発生する可能性があります。

たとえば、変数名そのものを文字列として利用しているコードや、特殊なevalの利用、関数を文字列化した結果に依存する処理などでは注意が必要です。

そのため、次の流れで運用することが重要です。

開発
↓
minify
↓
テスト
↓
本番公開

minifyできたことだけを確認するのではなく、実際にWebサイトやWebアプリが正常に動作するか確認しましょう。

初心者ならesbuildから試すとわかりやすい

VSCodeで一般的なHTML・CSS・JavaScriptのWebサイトを作っている場合は、まずesbuildを使ってみる方法が比較的わかりやすいでしょう。

esbuildをインストールする

npm install --save-dev esbuild

JavaScriptをminifyする

npx esbuild src/app.js --minify --outfile=dist/app.min.js

CSSをminifyする

npx esbuild src/style.css --minify --outfile=dist/style.min.css

JavaScriptをbundleしてminifyする

npx esbuild src/app.js --bundle --minify --outfile=dist/app.min.js

npm scriptsへ登録する

package.jsonへ次のように登録できます。

{
  "scripts": {
    "build:js": "esbuild src/app.js --bundle --minify --outfile=dist/app.min.js",
    "build:css": "esbuild src/style.css --minify --outfile=dist/style.min.css",
    "build": "npm run build:js && npm run build:css"
  }
}

あとは次のコマンドを実行するだけです。

npm run build

毎回長いコマンドを入力する必要がなくなり、minify処理を簡単に再実行できます。

VSCodeでminifyするなら自動化しておくと便利

VSCodeでコードをminifyする方法はいくつかありますが、継続的にWeb制作やWeb開発を行うのであれば、外部ツールとnpm scriptsを組み合わせる方法が扱いやすいでしょう。

JavaScriptを細かくminifyしたい場合はTerserが候補になります。

JavaScriptのbundleやCSSのminifyまでまとめて高速に処理したい場合は、esbuildが便利です。

HTMLについては、html-minifier-terserなどを利用できます。

また、Viteやwebpackなどをすでに利用しているプロジェクトでは、本番ビルドにminify処理が組み込まれている可能性があるため、既存の設定を確認することも重要です。

基本的には、元コードを直接minifyして上書きするのではなく、開発用のsrcと公開用のdistなどを分けて管理します。

さらに、npm scriptsやVSCode Tasksへ処理を登録しておけば、毎回同じ手順でminifyできるため、個人開発だけでなくチーム開発やCI/CDでも再現性を高めやすくなります。

以上、VSCodeでコードをminifyする方法についてでした。

最後までお読みいただき、ありがとうございました。

VSCode
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

  1. ホーム
  2. VSCode
  3. VSCodeでコードをminifyする方法
目次