フロントエンド最適化：ASTベースのコード圧縮（Minify）とTree-shaking

Webページを構成するアセットの中で、JavaScriptは1バイトあたりの計算負荷が最も高いリソースです。画像はダウンロード後にGPUデコードを行うだけで描画されますが、JavaScriptはダウンロードされた後、モバイル端末のメインスレッドCPU上で解凍、字句解析、構文木（AST）構築、バイトコードコンパイル、実行の全工程を経る必要があります。

最適化されていない巨大なバンドルファイルは、Googleの検索ランキング指標であるFCP（First Contentful Paint）、LCP（Largest Contentful Paint）、および操作応答性を測るINP（Interaction to Next Paint）を著しく悪化させます。Minification（圧縮）によってコードサイズを40〜70%削減することで、初期表示速度とメインスレッドの占有時間を劇的に短縮できます。

モダンな圧縮エンジン（Terser、esbuild、SWCなど）は、正規表現による文字列置換ではなく、構文解析コンパイラとして動作します：

1. 空白・コメントの除去: 人間用のインデントやコメントをすべて破棄します。
2. 不要コード削除（DCE, Dead Code Elimination）: 絶対に実行されない条件分岐（if (false) { ... }やif (process.env.NODE_ENV === 'development')）をビルド時に恒久削除します。
3. 識別子マングリング（Mangling）: 長い変数名や内部関数名をa, b, cといった1文字の英字へ短縮し、頻出するトークンの消費バイト数を最小化します。

// 元のソースコード:
function calculateMemberDiscount(customerRecord, isCouponApplied) {
    const baseDiscount = 1000;
    if (false) {
        console.log("到達不能なデバッグコード");
    }
    return isCouponApplied ? baseDiscount * 1.2 : baseDiscount;
}

// コンパイル＆マングリング後の出力:
function a(b,c){return c?1200:1000}

Minificationがファイル内部の不要バイトを削減するのに対し、Tree-Shakingは外部ライブラリから「実際に使われている関数だけ」を残して未使用コードを丸ごと削ぎ落とす手法です：

• ESモジュール（ESM, import/export）: 静的な構文構造を持つため、ビルド時にどのモジュールが使われているかをバンドラーが100%安全に特定し、未使用コードを完全に排除できます。
• CommonJS（CJS, require()）: 動的に呼び出せるため、バンドラーが安全性を担保できず、未使用コードがそのままバンドルに残ってしまいます。
• ライブラリ開発時はpackage.jsonに"sideEffects": falseを明記することで、積極的なTree-shakingを許可できます。

CSSはレンダリングをブロックするリソース（Render-blocking resource）です。スタイルシートの解析が終わるまでブラウザは描画を開始できません。

• 重複セレクタの統合やショートハンドへの変換（margin-top: 10px; margin-right: 0; margin-bottom: 10px; margin-left: 0; -> margin:10px 0）
• Tailwind CSSのJITエンジンやPurgeCSSを活用し、HTMLで使用されていない数メガバイトのフレームワークスタイルをビルド時に完全に削ぎ落とします。

Source Map（.mapファイル）は圧縮コードから元のTypeScriptコードへ復元するためのデバッグ用ファイルです。しかし、これを公開Webサーバーにそのままアップロードすると、社内の独自ビジネスロジックやAPI仕様が競合他社や第三者に完全に露呈します。CI/CDパイプラインにおいてSentry等の監視サーバーにのみ秘密裏にアップロードし、公開バンドルからはSource Mapの参照コメントを削除するのがベストプラクティスです。軽量なコード圧縮はDevUtils CSS MinifierおよびJS Minifierで安全に実行できます。