JavaScript・CSS 圧縮（Minify）

機能

minify（圧縮）は、ブラウザがコードを実行するのに不要なもの、つまり空白、改行、コメント、長い名前をすべて取り除きます。ファイルが小さくなればダウンロードが速くなり、特にモバイル回線でのページ読み込み時間や Core Web Vitals が改善します。

このツールは、JavaScript を webpack、Rollup、Vite で使われている minifier の Terser で、CSS を CSSO で圧縮します。CSSO はスタイルシートの再構成も行います：色を短縮し（#ffffff を #fff に）、冗長な単位や値を取り除き（0px 0px を 0 に）、セレクターや宣言が共通するルールを統合します。

使い方

1. 入力 欄にコードを貼り付けるか、.js や .css ファイルをドロップするか、サンプル をクリックします。
2. JavaScript または CSS を選びます。
3. JavaScript では、変数名を短縮 でローカル変数や引数の名前を 1 文字にします。export された名前やグローバルな名前は決して変更されません。
4. CSS では、重複ルールを統合 で同じ宣言を持つルールをまとめます。
5. 結果をコピーするか、ダウンロードします。各欄の下にあるサイズのカウンターで、どれだけ削減できたかがわかります。

JavaScript に構文エラーがある場合は、エラーメッセージに行と列が表示されるので、その箇所に移動できます。

例

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

は次のようになります

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

使いどころ

CDN 用のスニペット、HTML メール内のインラインスクリプト、ブックマークレット、あるいはライブラリがどこまで小さくなるかの確認など、単発の作業に使ってください。実際のプロジェクトでは、ソースを読みやすく保つため、ビルドのたびにバンドラーで minify するべきです。