CSS/JS Minify 完全ガイド｜メリット・オンライン検証・Vite 本番ビルド

（更新: 2026年7月28日 ） Minify CSS JavaScript パフォーマンス Web開発 Vite
結論：Minify は「本番ビルドの1行」＋「デプロイ前の試算」
  • 効果: 転送量おおよそ 10〜30% 削減（コメント・インデント量に依存）
  • 即試用: 下の Minifier で CSS/JS をブラウザ内圧縮（FTP 直アップ前の確認向け）
  • 本番: vite build / esbuild の minify: true で CI に組み込む
  • 記事 vs ツール: 手順と失敗例はこの記事、Minify ツール はその場で圧縮結果だけ欲しいとき

1. Minify が削るもの・削らないもの

対象MinifyTree-shaking画像圧縮
空白・改行・コメント✅——
未使用 export / 死コード—✅—
PNG / JPEG の画素——✅

Minify だけでは「使っていない CSS セレクタ」は残ります。未使用スタイルの削除は PurgeCSS 等の別工程です。

圧縮前後の例

/* サイトの基本スタイル */
body {
  color: #333333;
  margin: 0;
}

↓ Minify 後

body{color:#333;margin:0}

2. オンライン Minify（デプロイ前の試算）

WordPress テーマの 1 ファイルだけ直す、レガシー FTP 環境で bundler が無い、といった 「本番ビルドの外」 では、下のツールで即時に圧縮率を確認できます。入力はブラウザ内で処理され、サーバーへ送信されません。

⚡ この場でコードを圧縮する

3. 本番ビルドでの自動 Minify

Vite（推奨）

vite.config では production ビルド時に JS が esbuild、CSS が既定で minify されます。明示する例:

// vite.config.js
export default {
  build: {
    minify: 'esbuild',
    cssMinify: true,
    sourcemap: false, // 本番公開は false。監視ツール用は別アップロード
  },
};

esbuild（CLI / Node API）

import { build } from 'esbuild';

await build({
  entryPoints: ['src/app.ts'],
  bundle: true,
  minify: true,
  sourcemap: true, // 生成は可。CDN 公開は別設定
  target: ['es2022'],
  outfile: 'dist/app.min.js',
});

ライセンスコメントだけ残す場合は Terser の comments: /@license/i 等を検討します。esbuild は @license ブロックを保持する設定が可能です。

4. Minify・圧縮・難読化の関係

A B B
Minify 転送量削減 通常必須
gzip / Brotli 転送経路の圧縮 Minify の後
難読化 解析の難化 一般 Web では非推奨が多い

gzip/Brotli だけに頼り Minify を省略すると、コメント付き CSS がそのまま圧縮器に渡り、初回ロードが重くなります。Brotli と gzip の比較 も合わせて確認してください。

5. デプロイチェックリスト

  1. ソース管理 — .min.js だけ残して未圧縮を消さない（Git には可読ソースを置く）
  2. ビルド — transpile → bundle → minify → 成果物を dist に出力
  3. 圧縮 — CDN / nginx で Brotli または gzip
  4. キャッシュ — ハッシュ付きファイル名 + Cache-Control: immutable
  5. 計測 — DevTools の Slow 3G で FCP/LCP。オフィス回線だけでは差が見えないことがある
  6. Source Map — 本番 URL に .map を置いていないか curl で確認

6. よくある失敗（Failure Boundary）

ES6+ 構文で古い Minifier が落ちる
UglifyJS 2 等は optional chaining (?.) やアロー関数で失敗します。2026 年時点では esbuild / Terser / Vite 既定の minify を使ってください。

Minify 済みファイルを手編集する
.min.css を直接直すと次回ビルドで上書きされます。必ずソース側を編集し、ビルドで再生成します。

「Minify ＝ セキュリティ」
フロントに載せた API キーは Minify しても復元可能です。秘匿はサーバー側の責務です。

7. 関連リンク