JSミニファイヤー
JavaScriptを、主要なビルドツールが採用しているのと同じエンジンであるTerserで圧縮します。空白やコメントを取り除き、必要に応じて変数名も難読化して、すべてブラウザ内でより小さく、それでいて正しく動く出力を生成します。
- ファイルは端末の外に出ません
- 無料、登録不要
- 透かしなし
- 一度読み込めばオフラインでも動作します
JSミニファイヤーの使い方
- 1
コードを貼り付け
有効なJavaScriptファイルやスニペットを何でも貼り付けます。
- 2
オプションを選ぶ
最小の出力サイズにするには変数の難読化をオンのままにし、結果を読む必要がある場合はオフにします。
- 3
結果をコピー
圧縮されたコードを、削減できたサイズとともにコピーします。
ミニファイが実際に裏で行っていること
空白とコメントの削除はミニファイの中で最も分かりやすく簡単な部分であり、それ単体ではよく書かれたコードのサイズにほとんど影響しません。本当のサイズ削減は2つのより深い変換から生まれます: 1つは難読化で、すべてのローカル変数と関数の引数を可能な限り短い識別子に名前変更します（`accumulator`は`a`に、`temporaryResult`は`t`になります）。もう1つはデッドコード除去で、静的解析によって決して実行されない、あるいは出力に決して影響しないと証明できる分岐や式を取り除きます。どちらもコードの構造 — スコープ、どの名前がローカルでどれがエクスポートされているか、どの分岐が到達不可能だと証明できるか — を実際に理解する必要があり、だからこそTerserのような本物のパーサーベースのツールは、空白に対する単純な検索置換では決して届かないほど有意に小さな出力を生み出せるのです。
なぜほとんどの開発者はもう単体のミニファイヤーにほとんど触れないのか
Webpack、esbuild、Rollup、Viteのようなバンドラーは、本番ビルドの一部としてほぼ例外なくTerserかTerser互換のエンジンを裏で使い、出力を自動的にミニファイします。そのため、モダンなJavaScriptプロジェクトの中で作業する人にとって、ミニファイはビルドコマンドを実行するたびにすでに見えないところで起きています。このような単体ツールは、そのパイプラインの外側に落ちるケースをカバーします: ビルドステップのない単一のscriptタグ、スニペットがどれだけ縮むかの簡単な確認、あるいはそのためだけにバンドラー設定一式を持ち込むことなく圧縮する必要がある単発のファイルなどです。
フォーマットの逆であって、フォーマットの代わりではない
ミニファイとフォーマットは同じコードに対する正反対の操作です: このツールは、Prettierのようなフォーマッターが意図的に付け加える空白、構造、読みやすさを取り除きます。姉妹ツールであるJavaScriptフォーマッターは、まさにこのツールが行うことの逆を行います — 誰かから渡された圧縮済みファイルを、実際にデバッグできるくらい読みやすい形に戻すのに役立ちます。
本物のビルドパイプラインは通常、ミニファイをソースマップ — 圧縮された出力のあらゆる位置を元のソースコードの正しい行に対応付ける別ファイル — と組み合わせます。実際に動いているファイルは読めなくても、デバッガーが本番環境でも読みやすいコードと正しい行番号を表示できるようにするためです。この単体ツールは意図的にソースマップを生成しません。本番デプロイのためではなく、一回限りの手早い縮小のためのものだからです。本物のビルドパイプラインに組み込むものは、対応するソースマップを一緒に出力するバンドラーを通すべきです。
よくある質問
コードはサーバーに送信されますか？
いいえ。Terserはブラウザにダウンロードされてそこで実行されます — 圧縮処理はすべてお使いの端末上で行われます。独自コードや社内コードがお使いの端末から出ることはありません。これはすべてのオンラインミニファイヤーに当てはまるわけではありません。
圧縮でコードが壊れることはありますか？
正しく行われている限りありません — Terserはテキストをパターンマッチングするのではなく、コードを本物の構文木に解析するため、変換後の出力はほとんどのコードで元と同じように動作します。1つだけ本当に注意すべきエッジケースがあります: 実行時に自分自身のソースコードを調べるコード、たとえば関数に対して`Function.prototype.toString()`を呼んで結果を解析する、あるいは変数名や関数名を文字列として利用する（一部の依存性注入パターンがこれを行います）場合です。難読化は名前を変更するため、このような自己参照的な検査は圧縮後に異なる名前を見ることになります。まれなケースですが、コードがリフレクションで何か変わったことをしている場合は知っておく価値があります。
圧縮後の出力は依然として有効に動作するJavaScriptですか？
はい。出力は普通のJavaScriptです — ただ短くなっているだけです。`<script>`タグやビルドの出力にそのまま、元のファイルと同じように使えます。
これはいつ実際に使うべきですか？
本番ビルド、サイズ制約のある場所に埋め込むスクリプト（ブラウザ拡張機能、トラッキングスニペット、サイズ制限のあるウィジェットなど）、あるいはビルドステップを組むまでもなく素早く縮小したい単発のファイルです。ソースファイルや開発用ファイルを圧縮すべきではありません — それらは読みやすいままにしておき、バンドラーが行うのと同じように最終的なビルド出力だけを圧縮してください。
なぜ出力は読みにくい見た目になるのですか？
それが目的です。空白やコメント、長い変数名は、それを実行するJavaScriptエンジンのためではなく、ソースコードを読む人間のために存在します。それらを取り除く（難読化が有効なら名前も短くする）ことで、コードの動作を変えることなくネットワーク経由で送られるバイト数を減らします。