JS ミニファイア — ファイルサイズ削減のために JavaScript を圧縮
空白とコメントを取り除き、変数をリネームして JavaScript を圧縮します。ES2020+ の構文に対応し、完全にブラウザ内で動作します。アップロードや制限はありません。
JS Minifier
Minify and compress JavaScript code. Works entirely in your browser — no uploads.
クライアント側コードにとっての JavaScript ミニファイケーションは、2000 年代後半から標準的な本番ステップでした。当時、jQuery のミニファイビルドがウェブで最もダウンロードされているファイルになりました。議論は単純です。ワイヤ越しの JS のすべてのバイトは、エンジンがパースしなければならないバイトであり、パースは Time to Interactive のクリティカルパス上にあります。典型的な現代のウェブページは 200〜500 KB の JS を出荷し、そのうち 30〜50% は空白、コメント、エンジンが必要としない長い説明的な名前です。ミニファイケーションはこれらすべてを取り除き、実行時間が同じでダウンロードとパースが速い出力を生成します。削減はただのパフォーマンス向上です。
「あまり自明ではない」のは、セーフとアグレッシブのプリセットの選択です。セーフプリセットは明白なことだけを行います。コメントを取り除き、空白を折りたたみ、余分なセミコロンを削除し、true/false/undefined をより小さい場合にリテラル形に短縮します。アグレッシブプリセットはさらに進みます。ローカル変数と関数式を 1 文字の識別子にリネームし、1 回しか使われない変数をインライン化し、到達不能なコードを削除し、ブール式を単純化します。両方とも意味的に等価な出力を生成しますが、アグレッシブプリセットは Function.name がソース名と一致することに依存するコード（稀）や、自分のソースに対して eval を使うコード（同様に稀で、同様に悪いパターン）を壊す可能性があります。
最後に受け渡しについてまとめます。本番への JS の出荷が目的なら、ソースを実際のビルドパイプライン（esbuild、Vite、Webpack）を通してください。これらのツールは結合、ミニファイ、トランスパイル、tree-shaking を 1 パスで実行します。ブラウザツールは、1 回限りのミニファイ、単一ファイルのデバッグ、自分では書いていないコードに対するミニファイアの影響の検査に適しています。本番の問題のデバッグが目的なら、ビルドパイプラインでソースマップを生成し、出荷されるファイルとは別に保持してください。ミニファイされたコードは機能的にソースと同一ですが、ソースマップなしでは読むのが苦痛です。
使い方
JavaScript を貼り付ける
JS を入力エリアにドロップするか、.js ファイルを読み込みます。ミニファイアは現代の ES2020+ 構文（アロー関数、async/await、オプショナルチェイニング、nullish 合体、トップレベル await）を受け付け、正しく解析します。
圧縮レベルを選ぶ
セーフ（デフォルト）は空白とコメントを取り除き、すべての変数と関数名を保持します。アグレッシブはさらにローカル変数と関数を短い識別子にリネームし、さらに 5〜15% の削減を追加します。
結果をコピーまたはダウンロードする
ミニファイされた JS をクリップボードにコピーするか、.min.js ファイルとしてダウンロードします。サイズ削減率がダウンロードボタン上に表示されるので、削減効果を確認できます。
よくある質問
ミニファイケーションは実行時の挙動を変更しますか？
いいえ。ミニファイされた JS はまったく同じ実行、まったく同じスコープチェーン、すべての入力に対して同じ出力を生成します。変更点は空白の削除、コメントの除去、ローカル識別子の短縮だけであり、いずれも JS エンジンからは見えません。
ミニファイされた JS はどのくらい小さくなりますか？
典型的な削減は、手書きの JS で 30〜50%、すでにミニファイされたフレームワーク出力で 10〜25% です。コメントが豊富で説明的な名前を持つライブラリは 60% 以上縮小することもあります。節約されるのは帯域とパース時間であり、実行時間ではありません。最近のエンジンはミニファイされたコードとミニファイされていないコードを同様の速度でパースします。
これは JS バンドラーとどう違いますか？
バンドラー（Webpack、Vite、esbuild、Rollup）は複数の JS ファイルを 1 つに結合し、インポートを解決し、tree-shaking を処理します。ミニファイア（本ツール）は単一の JS ファイルのサイズを削減します。ほとんどのビルドパイプラインは両方を実行します。まずバンドルし、次にバンドルをミニファイします。
ソースマップは含まれますか？
いいえ。ミニファイされた JS にはデフォルトでソースマップはありません。本番デバッグには、ビルドパイプラインでソースマップを生成し（esbuild、Rollup、Terser の `--sourcemap` フラグ）、出荷される .min.js ファイルとは別に保持してください。ソースマップは本番には出荷されません。
TypeScript や JSX でも動作しますか？
TypeScript 構文（型注釈、インターフェース、ジェネリクス）は有効な JS ではないため、ミニファイアはそれを解析しません。JSX は有効な JS（`React.createElement` 呼び出しのシンタックスシュガー）であり解析しますが、JSX 変換なしでは出力が正しく動作しない可能性があります。ミニファイの前にビルドパイプラインで型と JSX を取り除いてください。
制限事項
- TypeScript や JSX は非対応TypeScript の型注釈は有効な JS ではないため、最初に `tsc` または `esbuild` で取り除いてください。JSX は解析しますが、JSX 対応の変換なしでは出力が動作しない可能性があります。ミニファイアはプレーン JS のみを扱います。
- ソースマップ出力なしミニファイされた JS にはソースマップが含まれません。本番デバッグには、ビルドパイプラインでソースマップを生成し、出荷されるファイルとは別に保持してください。本ツールは、完全なビルドセットアップではなく、1 回限りのミニファイケーションに適しています。
- アグレッシブモードはパブリック API をリネームする可能性がありますアグレッシブレベルはローカル変数と関数式を短い識別子にリネームします。トップレベルで `export` された関数と `globalThis` にアタッチされた API は保持されますが、コードが `Function.name` がソース名と一致することに依存している場合は、セーフプリセットを使用してください。
プラットフォーム別の注意点
- macOS
- コマンドラインで作業する場合、`npx terser input.js -o output.min.js` が標準的な等価物です。ブラウザツールは、Node と Terser のインストールに時間がかかるセットアップに見合わない 1 回限りのミニファイケーションに適しています。
- Windows
- PowerShell は JS をネイティブにはミニファイできません。ブラウザツールはアドホック作業に適しています。ビルドパイプラインには npm 経由で esbuild または Terser を使用してください。本ツールのミニファイケーションアルゴリズムは、同じ入力に対して Terser のセーフプリセットと一致します。
- Linux
- 標準的な CLI 等価物は `npx terser input.js -o output.min.js` または `npx esbuild --minify input.js` です。ブラウザツールは、ターミナルに入力し直すのが現実的でないチャットやメール、ドキュメンテーションページから貼り付けた JS に適しています。
- Web
- 完全にクライアントサイドで動作します。ページの読み込み後はオフラインでも動作します。コマンドラインツールや Node.js が利用できない制限のある環境で便利です。