Softonic

JavaScript圧縮ツール

ステップ 1 / 3

スクリプトまたは ES モジュール（最大 1,000,000 文字）を貼り付けるか、.js ファイルを開いてください。

次へ：オプションを選択

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

適用される技術

技術 内容
空白の削除 スペース、タブ、改行を取り除く
コメントの削除 // と /* */ を削除（/*! などのライセンスコメントは残せる）
変数名のマングリング userName を u にリネーム（スコープ安全）
プロパティ名のマングリング obj.foo を obj.a にリネーム（危険）
定数畳み込み 1 + 2 + 3 → 6
デッドコードの除去 return 以降の分岐を削除
制御フローのインライン化 一度しか使われない小さな関数をインライン化
文の連結と真偽値の短縮 a(); b(); → a(),b();、true → !0

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

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

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

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

よくある間違い

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

よくある質問

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

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

はい。「ソースマップも作成」にチェックを入れると、軽量化したコードと一緒に .map ファイルが手に入ります。軽量化したコードを元の行と名前に対応づけるので、ブラウザーの DevTools で読みやすいコードとスタックトレースを表示できます。2 つのファイルは同じフォルダーに置いてください。軽量化したコードの末尾には、ファイル名でマップを探す //# sourceMappingURL= コメントが付きます。マップには元のコードが含まれるため、誰に読まれても構わない場所にだけ公開してください。

はい。トップレベル await（ES モジュール内）、クラスフィールド、プライベートメソッド、null 合体演算子、オプショナルチェイニング、数値区切り文字をサポートしています。デコレーターには対応していないため、TypeScript や JSX と同様に、先に通常の JavaScript へコンパイルしてください。新しい構文を古いバージョンに変換することはありません。ECMAScript のバージョンのオプションは、バイト数を減らすために軽量化後のコードが使ってよい最新の構文を決めるだけです。

いいえ。貼り付けたコードや開いたファイルのコードは、ブラウザー内で軽量化されます。当社のサーバーに送信されることも、ページのリンクに追加されることもありません。ステップ間では、このタブのセッションストレージに保存され、タブを閉じるとブラウザーによって消去されます。

関連ツール

Webpack設定ジェネレーター

短いフォームからwebpack 5のwebpack.config.jsを生成します。entry・出力フォルダー・モードを設定し、TypeScript、Babel、CSSローダー、HtmlWebpackPlugin、開発サーバーを切り替えるだけです。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

.gitignore ジェネレーター

Laravel、Node.js、Python、Rails のプロジェクト用除外ルールを組み合わせます。結果をコピーするか、.gitignore 入りの ZIP をダウンロードできます。個人用ルールは別に表示します。

16進数から10進数への変換ツール

16進数を10進数（10進法）に変換します。メモリアドレス、エラーコード、RGBチャンネル、任意精度の整数に対応します。

Dockerfileジェネレーター

5つのアプリ構成に合うDockerfileと.dockerignoreを作成。実際の起動対象、作業ディレクトリ、内部ポートを入力し、両方のファイルを確認できます。

Markdownリンク生成ツール

URLとアンカーテキストからMarkdownリンクの記法を生成します。タイトルのツールチップや、長い文書を読みやすく整える参照形式のリンクにも対応しています。

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