JavaScript 圧縮
小さなサンプルは、コメントと空白を削るだけで68バイトから40バイトへ(41.2%減)小さくなります: function hello(name){return"Hi, "+name;}
使い方
- 入力欄にJavaScriptを貼り付けます。
- 残す必要のあるヘッダーがある場合は「ライセンスコメントを残す」をオンのままにします。オフにするとすべてのコメントを削除します。
- 圧縮前後のサイズを確認し、圧縮したコードをコピーします。
計算方法
コードをトークンに分け、同じ意味で読める最小限の空白だけを入れて書き戻します。トークン自体は変えないので、文字列、正規表現、テンプレートリテラル、数値、名前は入力したとおりに出てきます。
変数名の短縮、プロパティ名の短縮、デッドコードの削除、構文の変換はしません。そのため本格的なminifierより削減量は少なくなります。
2つのトークンがつながって1つになってしまう箇所には空白を残します。"return x"、"a in b"、"a + +b"、"1 .toString()" などです。スラッシュは直前のトークンから正規表現か割り算かを判断し、if・while・for の条件部の閉じ括弧の後も正しく扱います。
改行は、プログラムの意味が変わりえない箇所でだけ削除します。開き括弧、カンマ、セミコロン、演算子の後などです。セミコロンのない文の後、return の後、( や [ で始まる行の前など、JavaScriptがセミコロンを自動挿入しうる箇所では改行を残します。文末にセミコロンを付けたコードはごく少ない行数になります。
閉じていない文字列・テンプレート・コメントや、最後まで閉じない波括弧があると警告します。警告が出たら元のコードを確認してください。
よくある質問
圧縮したコードは同じように動きますか?
動くはずです。変わるのは空白とコメントだけで、トークンは同一です。セミコロン自動挿入が頼る改行も残します。ほかのビルド工程と同じく、公開前に圧縮後のコードでテストを実行してください。
改行が一部残るのはなぜですか?
JavaScriptは改行の位置にセミコロンを自動で補うことがあります。セミコロンのない文を次の行とつなげると意味が変わったり構文エラーになったりするため、改行を残します。元のコードにセミコロンを付ければ、その行もつなげられます。
Terserやesbuildのように変数名も短くしますか?
いいえ。削除するのは空白とコメントだけです。最小のバンドルが必要なら本番用のビルドツールを使い、このページは短いコード片やブックマークレット、サイズの確認に使ってください。
正規表現やテンプレートリテラルも扱えますか?
扱えます。/a b[/]/g のような正規表現や `x ${ y } z` のようなテンプレートはそのままコピーし、${ } の中のコードは圧縮します。例外は、if・while・for の条件部ではない閉じ括弧の直後の行頭から始まる正規表現リテラルで、これはまれなケースです。
新しい構文やTypeScriptに対応していますか?
アロー関数、クラス、オプショナルチェーン、プライベートフィールドなどの新しいJavaScript構文は読めます。意味を理解する必要がないためです。TypeScriptやJSXは解析しないので、型注釈やタグはただのテキストとして扱われることがあり、チェックもしません。
コードはアップロードされますか?
いいえ。すべてブラウザ内で処理します。