JS・CSS 圧縮
コードを貼り付けると圧縮版がすぐに表示され、削減できた文字数もわかります。
圧縮結果
使い方
- JavaScript または CSS を入力欄に貼り付けてください。圧縮版が入力と同時に表示され、押すボタンはありません。
- 構文は「自動」のままで構いません。判定が違う場合は JavaScript / CSS を手動で選ぶと、すぐに描画し直されます。
- 上部に削減前 → 削減後の文字数が表示されます。出力をコピーするか、.js / .css ファイルとしてダウンロードします。
例
入力
// 送料無料バッジ付きのカート合計 const TAX = 0.08; function total(items, coupon) { let sum = 0; for (const item of items) { sum += item.price * item.qty; } if (coupon) { sum -= coupon; } return { amount: sum * (1 + TAX), freeShipping: sum > 50 }; }
圧縮後
const TAX=0.08;function total(items,coupon){let sum=0;for(const item of items){sum+=item.price*item.qty;}if(coupon){sum-=coupon;}return{amount:sum*(1+TAX),freeShipping:sum>50};}
コメントは削除され、空白はまとめられていますが、識別子はすべて名前を保ち、リテラルは表記をそのまま保っています。表示は 279 → 177 文字（−37%）です。
ルール・制限・既知の問題
- 変更するのは空白とコメントだけです。改名も文の畳み込みもコードの削除も行いません。そのため圧縮結果は元と同じ動作をしますが、Terser の出力より大きくなります。
- /*! や //! で始まるコメント、@license や @preserve を含むコメントは残し、それ以外のコメントは削除します。
- 改行は、削除するとプログラムが変わる箇所に残します。return / throw / break / continue / yield / async の後と、JavaScript が自動でセミコロンを挿入する 2 つの文の間（a\nb、x={}\nfoo() など）です。それ以外のコードはおおむね 1 行になります。
- JavaScript は解析ではなくトークン化で処理します。文字列、正規表現、テンプレートリテラルの中の「/*」には触れません。除算と正規表現は直前のトークンで区別し、行をまたぐ正規表現は除算として扱います。
- CSS で削除するのは意味を持ちえない空白だけです。{ } ; , > ~ ! の前後と「:」の後、および「}」の直前の最後の「;」です。子孫セレクタの空白（.a .b は .a.b ではない）と「:」の前の空白（a :hover は a:hover ではない）は残し、calc(100% - 10px) の空白は構文の一部なので残します。
- 改名（mangle）、未使用コードの削除、drop_console は行いません。これらは動作を変えるため、「圧縮」ボタンが黙って行うべきことではありません。
- 非対応: HTML / SVG（空白の扱いは <pre>、<textarea>、インライン要素に依存します）、TypeScript の型レベルの書き換え、JSX / TSX の入力、ソースマップ、複数ファイルの結合。JSX は検出して警告を表示します。
- 入力の末尾で閉じられていない文字列・テンプレート・コメント・url( はエラーではなく警告で、残りのコードは圧縮されます。括弧の不一致も警告です。このツールは検証ツールではありません。
- 文字数は Unicode のコードポイントで数え、バイト数でも UTF-16 の単位でもありません。割合は整数に丸め、出力が増えた場合は +n% と表示します。すべてブラウザ内で動作し、何もアップロード・保存・URL への埋め込みをしません。
- 20 万文字を超えると、入力が止まって約 0.6 秒後に結果が更新されます。テキストが切り捨てられることはありません。出力の改行は LF で末尾に改行は付きません。
関連ツール
コードが小さくなったあとによく使われるツールです。