JavaScript 圧縮ツール(JS Minifier)
JavaScript を貼り付けると Terser で縮小します。デッドコードを削除し、名前を短縮し、空白を取り除きます。構文エラーは正確な行と列を示します。
ブラウザ内で動作登録不要アップロードなし
圧縮結果
JavaScript 圧縮ツールの使い方
- JavaScript を貼り付けるか、
.jsファイルを開きます。 - オプションを選びます:名前を短縮はローカル変数を短くし、圧縮はコードをより小さな等価コードに書き換え、ES モジュールはトップレベルの
import/exportを有効にします。 - ユーザーのブラウザが対応する ECMAScript のターゲットを選びます。ES2020 ならすべてのエバーグリーンブラウザで安全です。
- 出力の下にあるサイズ、削減率、gzip の推定値を確認します。
- 圧縮したコードをコピーするか、
output.min.jsとしてダウンロードします。
JavaScript 圧縮ツールは何をするのか?
圧縮(minify)は、JavaScript の動作を変えずにサイズを小さくします。このツールは webpack、Vite、Rollup でも使われている Terser を使い、3 種類の変更を加えます。
- 空白とコメントの削除:インデント、改行、コメントは JavaScript エンジンには不要です。
- 名前の短縮(mangle):
subtotalのようなローカル変数や関数引数の名前を 1 文字にします。グローバル名やオブジェクトのプロパティには手を付けないので、公開 API はそのまま動きます。 - 圧縮:定数式を畳み込み、到達不能なコードを削除し、
if文を三項演算子に変え、短い関数をインライン化します。
圧縮と gzip:両方必要?
はい。gzip や Brotli は通信時に繰り返しのバイトパターンを圧縮しますが、minify はブラウザがダウンロード・解析・コンパイルしなければならないバイトそのものを削除します。一般的なスクリプトは minify で 40〜60% 小さくなり、さらに gzip で 60〜70% 小さくなります。ここに表示される gzip サイズは、サーバーが実際に送信するサイズのよい目安です。
ライセンスコメントを残す
多くのオープンソースライセンス(MIT、BSD、Apache)は、著作権表示をコードとともに残すことを求めています。慣例として、/*! で始まるコメントや @license、@preserve を含むコメントは、ライセンスコメントを残すがオンのときに保持されます。
手作業で圧縮すべきでない場合
プロジェクトですでにバンドラーを使っているなら、本番ビルドの圧縮はバンドラーに任せ、デバッグ用にソースマップを生成しましょう。オンラインの圧縮ツールが最適なのは、単発のスクリプト、CMS やタグマネージャー用のスニペット、ブックマークレット、そしてコードがどこまで小さくなるかを確かめたいときです。
よくある質問
コードはサーバーにアップロードされますか?
いいえ。Terser はブラウザのタブ内で動くので、社外秘のコードがマシンの外に出ることはありません。
圧縮でコードが壊れることはありますか?
Terser は、有効な JavaScript の動作をまったく変えない変換だけを適用します。
Function.prototype.toString() に依存するコードや、eval を通じてローカル変数名に依存するコードは影響を受けることがあります。その場合は名前を短縮をオフにしてください。async/await、クラス、オプショナルチェーンなどのモダンな構文に対応していますか?
はい。Terser は ES2022 以降の構文を解析できます。ターゲット設定は出力で使ってよい構文を制御するだけで、新しい機能を古い構文にトランスパイルするものではありません。
minify と uglify の違いは?
同じ意味です。UglifyJS が古くからの定番ツールで、Terser は ES2015 以降に完全対応した、メンテナンスが続いているそのフォークです。