Visual Studio 2022 のビルド時にJavaScriptの難読化（Terser）自動実行する

はじめに

Terser（ターサー）は、JavaScript のコードを圧縮（Minify）・最適化するためのツールです。以前、難読化にObfuscationを利用していましたが、Obfuscationの方が強い難読化ですが、処理が遅くなることもあるため、Terserを試してみました。

Visual Studio 2022 のビルド時にJavaScriptの難読化（Obfuscation）自動実行する

Visual Studio 2022 のビルド時にJavaScriptの難読化（Obfuscation）自動実行する

nnao-web.boo.jp

1. Terser が具体的にやること

主に以下の 3 つを行って、ファイルのサイズを劇的に小さくします。

1. 圧縮 (Mangling):
   長い変数名や関数名を、意味を変えずに a や b といった 1 文字の短い名前に置き換えます。
2. 不要な情報の削除 (Stripping):
   コメント、改行、余分な空白などをすべて取り除きます。
3. コードの最適化:
   「実行結果が変わらない範囲」で、より短い書き方に書き換えます。例：if (true) { doSomething(); } → doSomething();

2. なぜ Blazor (Web) 開発で必要なのか？

Blazor Server などの Web アプリケーションにおいて、JavaScript のサイズを小さくすることには明確なメリットがあります。

1. 読み込み速度の向上:
   ファイルサイズが小さくなるため、ユーザーのブラウザでのダウンロードが速くなります。
2. セキュリティ（難読化）:
   変数名がバラバラになるため、ソースコードを直接読まれてロジックを解析される難易度が少し上がります。
3. モダンな標準:
   現在のフロントエンド開発において、UglifyJS という古いツールの後継として、ES6+（モダンな JavaScript）に対応した Terser が標準的に使われています。

2. terser をインストール

・エクスプローラーから「コマンドプロンプト」を開く (.csproj のあるフォルダにいることを確認)

・以下を順に入力：

4. Visual Studio のビルド後イベントに追加

共通のjavascriptファイルを自プロジェクトにコピーしてから、Terserによる圧縮と難読化を行う。