JavaScriptを圧縮・軽量化
JavaScriptはウェブページの中で最も容量を占めることが多く、ページが操作可能になるまでにすべてのデータをダウンロード、解析、実行する必要があります。ミニファイ（圧縮）することで、ファイルサイズを半分以下に削減できます。このツールは、最新のビルドツールの多くで採用されているミニファイア「Terser」を使用し、ブラウザ上で直接、空白やコメントの削除、変数名の短縮、安全なコード圧縮を行います。
機能
- 最新のES2015+をサポートするTerserエンジン。
- 圧縮: デッドコードの削除、定数の畳み込み、構文の短縮化。
- ローカル変数の名前の短縮（マングリング）（オプション）。
- 必要に応じてライセンスコメントを保持。
- バイト数とパーセンテージによるサイズ比較。
- プライバシー保護: コードはブラウザ内でローカルに処理されます。
一般的な削減効果
| コード | 一般的な削減率 |
|---|---|
| コメントが豊富なアプリケーションコード | 50–70% |
| ライブラリのソースコード | 40–60% |
| すでにコンパクトなコード | 15–30% |
| すでに圧縮（ミニファイ）済みのコード | 0–5% |
圧縮されたファイルをgzipやBrotli圧縮で配信することで、転送サイズをさらに60〜75%削減できるのが一般的です。
ヒント
- 元のソースコードを残しておく — 圧縮されたコードは読みにくく、デバッグが困難です。本番環境のコードをデバッグする場合は、ビルド時にソースマップを使用してください。
- 本番環境向けにはビルド工程で圧縮する — このツールは、単発のスクリプト、スニペット、ブックマークレット、またはバンドラーを使用しないプロジェクトに最適です。
- 圧縮後にテストする — 関数名や
evalに依存するコードの場合は特に注意が必要です。
関連ツール
CSS圧縮ツールでスタイルシートを圧縮、JSONフォーマッターでデータを整形、またはBase64で埋め込み用にスクリプトをエンコードできます。