ツール
入力
結果
結果はここに表示されます。terser は webpack が本番モードで既定で実行するミニファイアで、Vite や Rollup でも最小の出力が欲しいときの選択肢になっています。スクリプトを貼り付ければ、同じ方法で圧縮されます。不要なコードや冗長な式を取り除き、ローカルな名前を短くし、空白を削ります。結果には削減されたバイト数と、ブラウザが CompressionStream に対応していれば gzip 圧縮後の前後のサイズも表示されます。実際にネットワークを流れるのはこちらの数字です。
動作のしくみ
- compress は 2 回のパスでコードを書き換え（定数のインライン化、到達不能な分岐の削除、式の畳み込み）、mangle はローカル変数と引数の名前を短くします。
- トップレベルの名前は、入力を ES モジュールとして指定しない限り変更されません。従来のスクリプトのグローバル変数は、ページ上のほかのスクリプトから使われている可能性があるからです。
- /*! で始まるコメントや、@license、@preserve を含むコメントは、ほとんどのライセンスが求めるとおり保持されます。
- ECMAScript のバージョンは terser が出力してよい構文を決めます（ES5 ならアロー関数が新たに生まれることはありません）が、自分で書いた新しい構文が古い構文に変換されるわけではありません。
データの行き先
どこにも行きません。このツールは完全にブラウザ内で動作します。貼り付けたテキストはページが処理し、サーバーに送信されることも、ログに記録されることもありません。
このツールは無料で登録不要です。結果は開いているページの中にだけあり、どこにも保存されません。
必要なポイント
このツールは無料です。ログインもポイントも必要ありません。
よくある質問
- gzip 後の削減量が、圧縮前の削減量より小さいのはなぜですか？
- gzip 自体が同じ種類の冗長さの多くを取り除くからです。繰り返される空白や、長い識別子の繰り返しは非常によく圧縮されます。そのため、生のサイズで大きかった削減量は、両方を gzip すると小さくなります。それでもその小さい数字は本物で、転送量を見積もるときに使うべきなのはこちらです。
- 圧縮でコードが壊れることはありますか？
- terser の既定の変換は、標準的な JavaScript に対して安全であるように設計されています。壊れるのは、実行時に関数名やクラス名に依存するコード（Function.prototype.name や一部の依存性注入の仕組み）や、toString() で自身のソースを読むコードです。名前が問題かどうかを確かめるには、マングルをオフにしてください。
- console 呼び出しの削除は何をしますか？
- 圧縮後の出力から console.log、console.warn、そのほかすべての console.* 呼び出しを取り除きます。本番用バンドルには便利ですが、ユーザーのブラウザからの障害報告に console.error を頼っている場合は害になります。この設定は compress がオンのときだけ有効です。
- TypeScript や JSX も圧縮できますか？
- いいえ。terser が読むのは JavaScript だけで、最初の型注釈や JSX タグを構文エラーとして報告します。まず tsc、esbuild、Babel で TypeScript や JSX をコンパイルし、出力された JavaScript を圧縮してください。
背後にあるオープンソース
このツールは terser/terser（BSD-2-Clause）の上で動作しています。同じ処理を自分のプログラムに組み込みたい場合は、そのライブラリを使ってください。
terser/terser別の呼び方
- javascript 圧縮
- js minify オンライン
- terser オンライン
- js 圧縮 ツール
- javascript ミニファイ
- uglify js