JavaScript圧縮ツール

使い方

1. 1 左側の入力欄にJavaScriptコードを貼り付けます。
2. 2 Mangle / Compressのオン・オフを切り替え、コメントの扱いを選択します。
3. 3 Minifyボタンを押すと、圧縮前後のサイズがすぐに表示されます。

このツールを使う理由

• webpack、Rollup、Viteでも採用されているterserエンジンをそのまま使用しています。
• 遅延読み込み(lazy-loaded)方式のため、terserはMinifyボタンを押したときだけ読み込まれ、ページが軽快なままです。
• 圧縮前後のサイズを並べて表示するので、どれだけ削減できたかが一目でわかります。
• 完全にクライアントサイドで処理されるため、コードがブラウザの外に出ることはありません。

よくある質問

JavaScript圧縮ツール とは？

JavaScript圧縮ツールは、JavaScriptのソースコードを圧縮してファイルサイズを小さくし、読み込み速度を高速化するためのツールです。terserをベースに構築されており、変数名の短縮(mangle)、コードの圧縮、コメントの扱いを自由にカスタマイズでき、圧縮前後のサイズ比較も表示されます。処理はすべてブラウザ内で完結し、ソースコードがサーバーに送信されることはありません。

機能

例

function add(a, b) {
  // sum two numbers
  return a + b;
}

function add(n,d){return n+d}

主な用途

1. 1

   公開前にスクリプトを軽量化

   単体のJSファイルのバイト数を削減し、ページの読み込みを高速化。

2. 2

   手軽なワンオフ圧縮

   ビルドツールを構築せずにコードスニペットを圧縮。

3. 3

   圧縮設定の比較

   mangle/compressを切り替えてサイズの差を確認し、出力を調整。

参考文献

• Terser — JavaScriptのマングラー兼コンプレッサー — GitHub
• Minification — MDN Web Docs 用語集 — MDN

関連ツール