HTML/CSS/JS圧縮
HTML、CSS、JavaScriptコードを圧縮してファイルサイズを削減します
HTMLコードを入力
⚠️ 注意事項
このツールはシンプルな圧縮処理を提供します。本番環境では以下の専用ツールの使用を推奨します:
• HTML: html-minifier, HTMLMinifier
• CSS: cssnano, clean-css
• JavaScript: Terser, UglifyJS, esbuild
💡 コード圧縮の雑学・Tips
🗜️ Minificationとは
Minification（ミニフィケーション）は、コードの動作を変えずに不要な文字（空白、改行、コメント）を削除してファイルサイズを削減する手法です。通常20〜40%のファイルサイズ削減が可能で、ページの読み込み速度向上に直結します。
🔄 Minification vs Uglification
Minificationは空白やコメントの削除のみですが、Uglification（醜態化）はさらに変数名を短縮（userName → a）し、コードの読解を困難にします。Uglificationはより高い圧縮率を実現しますが、デバッグが困難になるため、Source Mapの使用が推奨されます。
📦 Gzip圧縮との組み合わせ
Minificationだけでなく、サーバー側でGzip圧縮を有効にすると、さらに70〜80%のサイズ削減が可能です。最新のBrotli圧縮を使えばGzipよりもさらに15〜20%小さくなります。MinificationとGzip/Brotliの組み合わせが、現代のWeb最適化のベストプラクティスです。
🚀 Tree Shakingとの違い
Minificationは既存のコードを圧縮しますが、Tree Shakingは使われていないコードを削除します。例えば、lodashライブラリから1つの関数しか使っていないのにライブラリ全体をインポートしている場合、Tree Shakingで不要な部分が削除されます。webpack、Rollup、Viteなどのモダンバンドラーはこの機能を標準搭載しています。
🎯 開発環境では使わない
Minifiedコードはデバッグが困難です。開発環境では可読性の高い元のコードを使い、本番ビルド時のみMinificationを実行するのが一般的です。最近のビルドツール（Next.js、Vite、webpack等）は、環境に応じて自動的にMinificationの有無を切り替えてくれます。