Softonic

JavaScript圧縮ツール

ステップ 1 / 3
次へ

JavaScriptを貼り付けると、空白部分を削除し、変数を単一の文字に短縮し、無効なブランチを削除し、定数を圧縮して、コメントを削除するなどの処理により、サイズが40～70％縮小された圧縮版が得られます（この機能を有効にすると）。完全なビルドツールチェーンを使用していない場合の迅速なサイズチェックや、一度だけ使用する埋め込みページ、ランディングページなどに非常に適しています。

JavaScriptを最小化する方法

  1. 1

    ソースを貼り付ける

    有効なES5以上のJavaScriptです。ES6以降（テンプレート文字列、クラス、モジュール）の場合は、対象が一致していることを確認してください。

  2. 2

    圧縮レベルを選ぶ

    セーフ（空白とコメントのみ）、デフォルト（＋変数名のリネーム）、アグレッシブ（＋プロパティ名のマングリング。DOMアクセスを壊すおそれあり）。

  3. 3

    最小化

    このツールはTerserと互換性のある変換を実行し、結果に変換前後のバイト数を含めて出力します。

  4. 4

    コピーまたはダウンロード

    出力内容を`<script>`タグに貼り付けるか、またはCDNから提供するための`.min.js`として保存してください。

バイトはどこへ消えるのか

一般的な圧縮済みファイルは、元のソースより40～70％小さくなります。さらに gzip（または Cloudflare やほとんどの CDN が使用する Brotli）で圧縮すると、もう60～75％削減できます。両者を合わせると、100 KB のソースは通信時に約15～25 KB で配信できます。

ソース 圧縮後 ＋gzip ＋Brotli
jQuery 3.6 87 KB 30 KB 27 KB
Lodash 4.17 71 KB 25 KB 22 KB
React + ReactDOM 18 140 KB 44 KB 39 KB

適用される技術

技術 内容
空白の削除 スペース、タブ、改行を取り除く
コメントの削除 // と /* */ を削除（!important を除く）
変数名のマングリング userName を u にリネーム（スコープ安全）
プロパティ名のマングリング obj.foo を obj.a にリネーム（危険）
定数畳み込み 1 + 2 + 3 → 6
デッドコードの除去 return 以降の分岐を削除
制御フローのインライン化 一度しか使われない小さな関数をインライン化
文字列リテラルの圧縮 繰り返される文字列定数をまとめる

セーフモードとアグレッシブモード

  • セーフは変数名を保持し、空白だけを削除します。読みやすいスタックトレースが欲しいデバッグ作業に適しています。
  • デフォルトはローカル変数をマングリングしますが、グローバル名とプロパティ名は保持します。ほとんどのコードで問題なく動作します。
  • アグレッシブはプロパティ名を含むすべてをマングリングします。予約名を設定しない限り、プロパティに動的アクセスするコード（obj["prop"]、Object.keys(obj)）が壊れることがよくあります。

圧縮すべきとき、すべきでないとき

  • 本番環境では、ブラウザがダウンロードするすべてのアセットを圧縮しましょう。
  • ソースマップを配信しましょう。そうすればデバッグ時にもブラウザの DevTools が元の名前を表示できます。
  • 開発時には圧縮しないでください。ビルド時間を無駄にし、読みやすいエラーが失われます。
  • すでに圧縮済みのコードを再圧縮しないでください。.min.js ファイルは再圧縮しても約1～3％しか縮まず、壊れるリスクだけが残ります。

よくある間違い

  • 予約名を設定していない。 プロパティ名 payment_method が a にマングリングされると、動的なプロパティアクセス（obj["payment_method"]）が壊れます。
  • ソースマップを忘れている。 .map ファイルがないと、本番環境のエラーは判読できません。
  • CommonJS と ESM を一緒に圧縮する。 混在したモジュール方式では、圧縮前に慎重なツリーシェイキングが必要です。

よくある質問

通常、圧縮前ではサイズが40～70％小さくなり、gzippedまたはBrotliで圧縮するとさらに60～75％も小さくなります。100KBのソースファイルは、通信時に約15～25KBのサイズで送信されることが一般的です。

デフォルト（ローカル変数）のマングリングはほぼ常に安全です。一方、アグレッシブなプロパティのマングリングは、プロパティに動的にアクセスするコードをすべて壊します。有効にする前に reserved リストを慎重に設定してください。

はい、「ソースマップの生成」をオンにすると、ツールは圧縮されたコードと、各バイトを元のソースコードにマッピングした.mapファイルを返します。これらを両方CDNにアップロードすることで、DevToolsが読みやすいスタックトレースを表示できます。

はい。トップレベル await、クラスフィールド、プライベートメソッド、null 合体（nullish coalescing）、オプショナルチェイニング、数値区切りはすべてサポートしています。ごく新しい提案（デコレーター stage-3 など）については、該当するフラグを確認してください。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

EditorConfig ジェネレーター

インデントのスタイルとサイズ、改行コード、文字コード、空白ルールを指定して .editorconfig ファイルを生成し、IDE やエディタをまたいで書式を統一できます。

メールアドレス検証ツール

メールアドレスを検証します。RFC 5322構文チェック、MXレコードのライブ確認に加え、ローカル部、ドメイン、長さの詳細を表示します。メールは送信されません。

Markdownチートシート

見出し、リスト、表、コード、リンク、画像、GFM構文を、実際のプレビューとコピーできる例で確認できる実用的なMarkdownリファレンスです。

このツールは他の言語でも利用できます