JavaScript 圧縮ツール(JS Minifier)

JavaScript を貼り付けると Terser で縮小します。デッドコードを削除し、名前を短縮し、空白を取り除きます。構文エラーは正確な行と列を示します。

ブラウザ内で動作登録不要アップロードなし

圧縮結果

JavaScript 圧縮ツールの使い方

  1. JavaScript を貼り付けるか、.js ファイルを開きます。
  2. オプションを選びます:名前を短縮はローカル変数を短くし、圧縮はコードをより小さな等価コードに書き換え、ES モジュールはトップレベルの import/export を有効にします。
  3. ユーザーのブラウザが対応する ECMAScript のターゲットを選びます。ES2020 ならすべてのエバーグリーンブラウザで安全です。
  4. 出力の下にあるサイズ、削減率、gzip の推定値を確認します。
  5. 圧縮したコードをコピーするか、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 以降に完全対応した、メンテナンスが続いているそのフォークです。

関連ツール