データ

JavaScript 圧縮

現代のページの重さが本当に乗っているのは JavaScript です。これは訪問者がダウンロードするバイトだけでなく、ページが操作可能になる前にブラウザーが解析して実行しなければならないスクリプトそのものです。ソースコードは人のために書かれ、説明的な名前、空白、コメント、ときに実行されない分岐があり、そのほとんどは出荷する必要がありません。このツールはブラウザー内で Terser を動かします。バンドラーが用いるのと同じエンジンです。スクリプトを貼り込むと、圧縮され、ローカル名が短くなり、デッドコードが除かれた版が返り、元、圧縮後、gzip の 3 つのサイズが並ぶので、削減量を当てずっぽうにしません。JavaScript を正しく読み取るため出力は安全で等価なプログラムで、貼り付けた内容はこのタブから外に出ません。

  • バンドラーが本番ビルドで使うのと同じ圧縮器である Terser を動かし、コードを構文木として読んで安全に変換します。当てずっぽうではありません
  • 空白を消すだけでなく、デッドコードを落とし、定数を畳み、ローカル名を短くして本当に重量を減らします。これが gzip に強い削減の源です
  • 元、圧縮後、gzip の 3 つのサイズを並べて表示するので、生のバイト数ではなくサーバーが実際に送る大きさで結果を判断できます
  • すべてブラウザー内で動くので、貼り付けたコードは専有のものも端末に留まり、タブを閉じれば残りません
工具/JavaScript 圧縮
489 B
削減 0%
オプション

概要

JavaScript の圧縮は CSS より込み入っています。テキストを削るのではなくプログラムを書き換えるので、正確さが最も重要です。このツールは Terser に任せて正しく行い、価値を裏づける数字を出します。

  1. 01

    内部は Terser

    主要なバンドラーが本番ビルドで使う同じ圧縮器です。コードを木として読んでから安全に変換し、テキスト規則で当てずっぽうにはしません。

  2. 02

    本当の重量を取り除く圧縮

    デッドコードと決して実行されない分岐を落とし、定数を畳み、式を簡約し、冗長な文をまとめます。これは空白を消すだけでは決して届かない構造的な成果です。

  3. 03

    短いローカル名

    ローカル変数と引数を 1〜2 文字に変えつつ、トップレベルのグローバルと予約語は触らないので、プログラムは動き続け、バイトは縮み続けます。

  4. 04

    ライセンスコメントの保持

    オープンソースのコードが求めるライセンスと preserve のバナーは残し、出力中の他のコメントはすべて除きます。

  5. 05

    信頼できるサイズ内訳

    元、圧縮後、gzip のサイズが入力に合わせて更新され、正確な削減率も出ます。gzip こそネットワークを渡るものを反映する数字です。

  6. 06

    コピー、ダウンロード、アップロード

    クリップボードから貼り付け、ディスクからファイルを読み込み、結果をコピーするか min.js ファイルとして保存します。一連の流れはローカルで数秒です。

使い方

読みやすいソースを本番投入できる最小スクリプトへ数ステップで。削減量を常に画面に出しながら進めます。

  1. 01

    JavaScript を入力パネルに貼り付けるか、アップロードでファイルを直接読み込みます。

  2. 02

    オプションを選びます。最小出力には圧縮と名前短縮をオンのまま、バナーを出荷するならライセンスコメントを保持します。

  3. 03

    オプションの下の内訳で効果を確認します。元、圧縮後、gzip のサイズと削減率が並びます。

  4. 04

    入力に構文エラーがあればメッセージが出るので修正できます。なければ結果をコピーするか min.js ファイルとしてダウンロードします。

  5. 05

    圧縮ファイルを本番スクリプトを配信するページやビルド工程に組み込みます。

詳細

出力を安心して出荷でき、すぐ信頼できる細部です。

  • 主要なバンドラーで使われる標準的な JavaScript 圧縮器 Terser を採用しています。
  • 現代構文に対応します。アロー関数、クラス、async と await、テンプレートリテラル、オプショナルチェーンを含みます。
  • gzip サイズはブラウザー内蔵の圧縮で測定するので、実際のサーバーの転送量と一致します。
  • 構文エラーはメッセージとともにその場で報告され、壊れた出力を黙って出すことはありません。
  • アップロードもログもありません。貼り付けたコードは専有のものもブラウザー内に留まり、タブを閉じれば消えます。

活用シーン

JavaScript を本質まで圧縮することが報われる場面です。

  1. 速く、より操作可能なページ

    小さいスクリプトは早くダウンロードされ、解析され、実行されるので、Time to Interactive と、ユーザーと検索順位の双方に効く Core Web Vitals を改善します。

  2. バンドラーなしのビルド工程

    静的サイト、ウィジェット、他所へ埋め込むスニペットでは、スクリプトをここに貼ればパイプラインと同じ圧縮が得られます。ツールチェーンの用意は不要です。

  3. 埋め込みスクリプトの配布

    他者があなたのスクリプトを自分のページに置くとき、渡したいのは最小の単一ファイルなので、配布物を公開する前に圧縮します。

  4. 生成コードの削減

    ベンダーライブラリや生成物は未圧縮で届くことがあります。ユーザーに届く前にここを通してバイトを取り戻しましょう。

関連情報

スクリプトと一緒にスタイルも出荷しますか。これをCSS 圧縮 と組み合わせてください。縮めるのではなくコードを展開して整えたいときは、SQL フォーマッター が逆方向の整形を行います。

JavaScript 圧縮は実際に何をするのか

JavaScript の圧縮は空白を消すだけに留まりません。プログラムそのものを書き換えるので、各部分を知っておくと役立ちます。それぞれの工程が何をし、なぜ結果が同じように動くのかです。

  1. 空白と区切り

    インデント、改行、不要なセミコロンを除き、解析規則により多くは完全に省けます。最も安価で安全な層であり、gzip がおおむね自力で取り戻す層でもあります。

  2. 圧縮、構造の工程

    Terser は定数式を評価し、決して実行されないコードを除き、単純な値をインライン化し、文をまとめます。本当の成果はここから来ます。gzip が届かない種類で、整形ではなく内容を取り除くからです。

  3. ローカル名の短縮

    長く説明的なローカル名が一文字になります。安全に変えられる名前だけが対象です。グローバル、オブジェクトのプロパティ、エクスポートされるものは残し、プログラムの挙動は同じです。

  4. 触られないもの

    公開名、オブジェクトのプロパティキー、文字列の中身、予約語は既定で残ります。圧縮後のコードが他のスクリプトやページと正しくやり取りし続けるのはこのためで、外部への約束は変わりません。

  5. なぜ gzip が正直な数字なのか

    サーバーは JavaScript を gzip や brotli で圧縮し、それらは繰り返しの空白や記号をすでに絞ります。圧縮は分岐ごと取り除き名前を短くすることで依然勝ちますが、結果は常に生のバイトではなく gzip サイズで判断してください。

  6. 圧縮であって難読化ではない

    圧縮は最小の等価プログラムを目指し、ソースマップでデバッグ可能に保ちます。難読化は意図的に読みにくくし、しばしば大きく遅くなります。目標が違い、このツールは前者を行います。

使い方のヒント

圧縮後の JavaScript を小さく、かつ信頼できるものに保つ習慣です。

  • 圧縮はビルドの最後の工程として行い、その出力をデプロイします。圧縮済みコードを手で編集したり、ソースとしてコミットしたりしないでください。
  • 削減は gzip サイズで判断します。それがサーバーの転送量で、大きな生の削減も圧縮をかけると僅かになりがちです。
  • 圧縮ファイルの傍らにソースマップを生成し、本番のスタックトレースとデバッガーが実際のコードを指すようにします。
  • 本番では圧縮と名前短縮をオンに。ただし実行時に関数名へ依存するコードがある場合は、一部のフレームワークのように、その名前を保護し、全体の名前短縮を切らないでください。
  • 圧縮ファイルは gzip または brotli と長いキャッシュ期間で配信します。圧縮と転送圧縮は重ね掛けで、互いの代わりにはなりません。

制限事項

このツールがすること、そして他の工程に任せることです。

  • 単一の JavaScript ファイルを圧縮します。モジュールのバンドル、import の解決、他ファイルへの参照の追跡は行いません。
  • 圧縮はしますがトランスパイルはしません。古いブラウザー向けに現代構文をダウンレベルするのは Babel や esbuild の仕事です。
  • TypeScript や JSX で書いたソースは先に素の JavaScript へコンパイルしてください。ここでは標準 JavaScript のみを読み取ります。
  • ソースマップの生成と難読化は範囲外です。このツールは最小で、なおデバッグ可能な等価プログラムの生成に集中します。

よくある質問

JavaScript の圧縮、それが変えるもの、いつ使うかについてのよくある質問です。

圧縮で私の JavaScript は壊れますか。

入力が正当なら壊れません。Terser はコードを木として読み、挙動を保つ変更だけを適用します。ローカル変数を改名し、デッドコードを除き、式を短くしますが、プログラムの動作は変えません。公開名、プロパティ、エクスポートされる識別子は残します。唯一注意すべきは、実行時に関数名や変数名へ依存するコードで、一部の依存設定がそうです。その場合はそれらの名前を保護するか、名前短縮を切ってください。

圧縮と名前短縮の違いは何ですか。

圧縮は構造の工程です。デッドコードを除き、定数を畳み、式を簡約し、gzip が届かない成果の多くはここから来ます。名前短縮は改名の工程です。ローカル変数と引数名を 1〜2 文字に縮めます。両者は独立で、どちらか一方でも両方でも実行でき、合わせると最小の出力になります。

圧縮と難読化の違いは何ですか。

圧縮は等価さを保ち、ソースマップでデバッグ可能なまま、できるだけ小さくします。難読化は意図的にコードを理解しにくくし、しばしばサイズと速度を犠牲にします。手法は一部共通ですが目標は逆で、このツールは難読化ではなく圧縮を行います。

現代 JavaScript に対応していますか。

はい。Terser は現在の構文を理解します。アロー関数、クラス、async と await、ジェネレーター、テンプレートリテラル、オプショナルチェーン、Null 合体を含みます。現代構文を圧縮しますが、古いブラウザー向けのダウンレベルはしません。それはトランスパイラーの仕事です。

ここで TypeScript を圧縮できますか。

直接はできません。このツールは素の JavaScript を扱います。先に TypeScript や JSX を JavaScript へコンパイルしてください。ビルドがすでに行っています。その出力をここに貼るかアップロードして圧縮します。

圧縮ファイルをリポジトリに残すべきですか。

いいえ。圧縮後の JavaScript はビルド成果物でありソースではありません。実際に編集する読みやすいコードをコミットし、圧縮ファイルは配信直前の最後の工程で生成します。圧縮出力をコミットするとレビューが読みにくく、マージが苦痛になります。

私のコードはどこかにアップロードされますか。

いいえ。すべてブラウザー内で動きます。貼り付けた JavaScript、アップロードしたファイル、結果はローカルで処理され、送信も保存もされず、タブを閉じれば消えます。専有コードも安全です。

関連ツール

データとフォーマットのツール群の続きへ。