JavaScriptの圧縮は難読化（obfuscation）とよく混同されますが、目的の異なる別の処理です。前者はバイト数を減らすためのもので、後者はコードのロジックを読みにくくするためのものです。
圧縮ツールが行うこと
圧縮ツールは空白・コメント・改行を取り除き、安全な範囲でローカル変数名を1〜2文字に短縮します。プログラムのロジック自体は完全に変わりません — あくまでファイルの技術的な圧縮です。
JSMinからTerserまでの簡単な歴史
2000年代初頭、Douglas Crockford（ダグラス・クロックフォード）がJSMinを公開しました。広く使われた初期のJS圧縮ツールの一つで、やっていたことは空白とコメントの除去のみで、変数名には手を加えませんでした。TerserやUglifyJS、esbuildといった現代のツールはコードをAST（抽象構文木）として解析し、さらに踏み込んでローカル変数や関数の引数を1文字の名前に変えます。実際のプロジェクトでファイルサイズに最も効くのは、空白除去よりむしろこの変数名の短縮（マングリング）です。
ソースマップ：変数名が変わったコードをデバッグする
変数名がaやb、cになり、改行もすべて消えると、本番環境のスタックトレースは1行にまとまった読みにくい位置を指すだけになります。ソースマップはこの問題を解決する仕組みで、圧縮後のコードの各位置を元のファイルの行・列・変数名に対応付ける別ファイルです。これによりブラウザのDevToolsは、実際には圧縮済みコードが実行されていても、読みやすいスタックトレースを表示できます。
何のために使うか
- 本番デプロイ前にJSバンドルのサイズを小さくする。
- ブラウザでのスクリプトのダウンロードと解析を速くする。
- 圧縮されたコードは読もうと思えば読めるのに対し、難読化されたコードはずっと読み解きにくい、という違いを理解する。
ツリーシェイキングと圧縮の違い
ツリーシェイキングは圧縮とは別の技術で、混同すべきではありません。モジュールの依存関係グラフを解析し、どこからも使われていない関数やエクスポートをビルド時にバンドルから完全に取り除きます。一方の圧縮は、すでに完成したコードを対象に、その文字列表現を短くするだけです。Viteやwebpackといったモダンなビルドツールはたいてい両方を順番に適用します — まずツリーシェイキングで不要なコードを削り、その後で圧縮によって残った部分を圧縮します。